Design direction · product-first

“예쁜 소개 페이지”가 아니라
“결정이 빨라지는 운영 화면”으로 바꾼다

현재 CASTIVE는 배경/그라데이션/카드가 깔끔하긴 하지만, 실제 사용자가 무엇을 보고 무엇을 눌러야 하는지 더 분명해야 합니다. 다음 기준은 레퍼런스가 적용된 듯한 느낌이 아니라, 운영 제품다운 질서를 만들기 위한 기준입니다.

핵심 방향 Dashboard-first

랜딩형 히어로보다 상태·작업·결정을 먼저 보여준다.

추천 구조 Sidebar + Content + Detail

왼쪽은 내비게이션, 가운데는 리스트, 오른쪽은 상세/액션.

톤앤매너 Calm · Clear · Dense

시각적 과장은 줄이고, 정보 밀도와 구조를 높인다.

1. Design principles

핵심 디자인 원칙

현재 제품의 문제는 “디자인이 없다”가 아니라, “디자인 언어가 제품의 쓰임과 안 맞는다”는 점입니다.

1) 정보 우선

상태, 일정, 검토자, 진행 단계가 먼저 보여야 합니다. 장식은 뒤로 미룹니다.

Status firstAction secondNarrative last

2) 단일 기준선

모든 카드/버튼/리스트는 8pt 간격 체계를 따르게 해서 화면 전체 리듬을 맞춥니다.

8pt gridConsistent radiusUnified spacing

3) 운영 친화성

디자인은 보여주기용이 아니라, 운영자가 빠르게 판단하고 다음 행동을 고르게 해야 합니다.

Fast decisionClear hierarchyVisible state
2. Visual system

레이아웃 / 타이포 / 컬러 / 컴포넌트 가이드

현재 프로토타입의 유리질 카드와 보라색 포인트는 유지할 수 있지만, 더 절제된 제품형 톤으로 다듬어야 합니다.

Layout
12-column content area + fixed sidebar

업무형 페이지에서는 랜딩 섹션보다 좌측 내비 + 중앙 리스트 + 우측 상세 뷰가 더 적합합니다.

Surface#fff / soft glass
Primary#2f6bff
Accent#14b8a6
Typography
Pretendard / system fallback

제목은 짧고 강하게, 본문은 14~16px 중심, 라벨은 12~13px로 명확하게 구분합니다.

H1 44–56H2 28–32Body 14–16Label 12–13
Components
Card / Table / Filter bar / Status chip / Empty state

모든 화면은 카드만으로 해결하지 말고, 테이블과 상태 표시를 함께 써서 운영성을 높입니다.

Status chipList rowRight panel
Motion
Subtle, functional motion only

강한 트랜지션보다 hover / focus / state change 중심으로 안정감을 주는 편이 낫습니다.

160msEase-outNo flashy motion
3. Immediate fixes

현재 프로덕트에서 바로 고쳐야 할 것

문제 1: 랜딩 페이지처럼 보임 High impact

히어로 문구와 로드맵 중심 구조는 소개 페이지로는 괜찮지만, 실제 사용 맥락에서는 첫 화면이 정보량이 부족합니다.

Fix: 히어로를 요약 대시보드로 바꾸고, 핵심 지표/상태/다음 액션을 위로 올린다.
문제 2: 레퍼런스가 적용된 느낌이 약함 Medium

색상과 카드 스타일이 무난하지만, 사용자가 “어디서 본 듯한 좋은 제품”이라고 느낄 정도의 질서가 아직 부족합니다.

Fix: 카드 깊이, 상태 색, 계층, 여백 규칙을 고정하고 컴포넌트를 표준화한다.
문제 3: 운영 상태 표현이 없음 Critical

실사용 제품은 대기/진행/검토중/반려/완료 같은 상태가 화면에 바로 보여야 합니다.

Fix: status chip, activity log, reviewer state, empty/error state를 추가한다.
4. Next steps

다음 작업 순서

  • 1
    화면 골격 확정

    Sidebar + content + detail 패턴을 기준으로 메인 shell을 먼저 고정합니다.

  • 2
    상태 컴포넌트 정의

    배지, 알림, 비어 있음, 오류, 로딩, 승인/반려 상태를 먼저 통일합니다.

  • 3
    실데이터 레이아웃 교체

    마케팅형 문구를 줄이고 실제 운영 데이터가 들어오는 영역을 전면에 배치합니다.

  • 4
    레퍼런스 기반 폴리싱

    Sir이 준 디자인 레퍼런스에 맞춰 radius, shadow, spacing, CTA density를 정리합니다.

5. Visual preview

눈으로 볼 수 있는 목표 화면 예시

대시보드
요청 관리
검토 큐
배포 기록
회고
진행 12 검토 4 반려 1
오늘 승인 필요3건

우선순위가 높은 항목을 즉시 처리합니다.

대기중 이슈7건

오래 대기한 요청을 먼저 드러냅니다.

이번 주 배포5건

배포 가능한 항목만 별도 묶음으로 확인합니다.

최근 요청

요청명 / 상태 / 담당자 / 다음 액션이 한 줄에 보여야 합니다.

세부 패널

선택된 항목의 메모, 변경 이력, 버튼을 오른쪽에서 바로 처리합니다.