맥락#
로그인·채팅·마이페이지 개발에는 읽기 쉬운 화면과 일관된 입력·상태 표현이 필요하다. 그러나 디자이너의 UI·UX 작업이 끝나지 않은 상태에서 강한 색상, 전용 타이포, 장식과 마케팅 레이아웃을 먼저 고르면 임시 구현이 최종 브랜드 결정처럼 보이고 후속 디자인 적용 비용도 커진다.
프로젝트 오너는 현재 화면이 보기 좋고 사용하기 쉬워야 하지만 디자이너에게 이미 디자인이 완성됐다는 인상을 주지 않아야 하며, 어떤 브랜딩에도 쉽게 바꿀 수 있어야 한다고 결정했다. [1]
후속 확인에서 브랜드 중립은 빈 화면이나 낯선 구조를 뜻하지 않으며, 헤더·계정·목록·폼과 채팅은 사용자가 이미 익숙한 제품 패턴을 따라야 한다는 점을 명확히 했다. [2]
결정#
- 현재 제품 웹은 브랜드 중립 UI 기반을 사용하며 최종 디자인으로 표현하지 않는다.
- 브랜드 중립을 이유로 일반적인 사용성을 제거하지 않는다. 내비게이션, 한 화면 한 행동, 폼 라벨, 목록 행, 빈 상태와 모바일 구조는 익숙한 웹 제품 패턴을 우선한다.
- 색상·타이포·간격·반경·그림자는
tokens.css의 의미 기반 변수로만 관리한다. - 토큰 이름에는 브랜드명·색상명보다
surface,text-muted,action,border같은 역할을 사용한다. - 버튼·카드·폼 필드·알림·앱 헤더·페이지 헤더를 공용 컴포넌트로 관리한다.
- 화면 컴포넌트에는 색상 리터럴과 인라인 스타일을 넣지 않는다.
- 접근 가능한 초점, 입력 라벨, 오류·성공·대기·빈 상태와 모바일 배치는 현재 단계에서도 유지한다.
- 홈과 기능 화면에서 내부 구현 용어와 개발 도구 중심 설명을 주요 위계로 노출하지 않는다.
- 디자이너 산출물은 토큰 → 공용 컴포넌트 → 화면 배치 → 브랜드 자산 순서로 적용한다.
현재 표현 수준#
- 무채색 중심의 캔버스·표면·텍스트·경계와 한 가지 기본 행동 위계를 사용한다.
- 버튼과 입력은 모바일에서도 누르기 쉬운 크기, 명확한 라벨, 초점과 비활성 상태를 제공한다.
- 로그인과 회원가입은 분리하고, 목록·상세·작성은 일반적인 웹 앱 정보 위계와 폭을 따른다.
- 카드의 반경과 그림자는 정보 그룹을 구분하는 수준으로 제한하고 장식 목적으로 늘리지 않는다.
- 홈은 실제 사용자가 서비스 목적과 첫 행동을 이해할 수 있는 제품 진입 화면으로 둔다. 개발 상태는 보조 정보로만 표시한다.
의도적으로 미결정#
- 브랜드 포인트 색, 전용 서체, 로고와 아이콘
- 사진·일러스트레이션·그래픽 스타일
- 감성 카피와 마케팅 히어로
- 모션 원칙과 고급 상호작용
- 디자인 도구·토큰 자동 동기화 방식
디자이너 인계 기준#
- 토큰 값을 교체하면 전체 화면의 기본 인상이 바뀐다.
- 공용 컴포넌트의 상태 명세가 로그인·채팅·마이페이지에 동시에 반영된다.
- 익숙한 사용 흐름은 유지하면서 색상, 타이포, 아이콘, 이미지와 세부 배치를 재정의할 수 있다.
- 화면 파일은 기능 구조를 유지하고 시각 예외만 최소 추가한다.
- 디자이너가 현재 구조를 최종안의 제약으로 받아들일 필요가 없다는 점이 문서에 명시된다.
관련 문서: 기본 웹 Supabase 기반, 프로젝트 개요, 프로젝트 오너 지시