인터페이스 디자인
최고의 디자인 팀(Linear, Vercel, Stripe, Apple)의 장인 정신으로 제품 인터페이스를 구축하세요. 이들과 일반적인 결과물의 차이는 재능이 아닙니다. 그것은 모든 결정이 결정되었으며, 계층 구조가 명확하고, 수많은 작은 디테일이 동시에 올바르다는 것입니다. 이 스킬이 바로 그 목표에 도달하는 방법입니다.
범위
사용 대상: 대시보드, 관리 패널, SaaS 앱, 도구, 설정 페이지, 데이터 인터페이스.
사용 불가: 랜딩 페이지, 마케팅 사이트, 캠페인, 브랜드 전용 작업. 이러한 경우 마케팅/프론트엔드 디자인 스킬을 사용하세요.
이 스킬은 자체 완결적입니다: 방향성, 시각적 계층 구조, 디자인 시스템 아키텍처, 그리고 프로덕션 등급 UI를 출시하는 데 필요한 폴리시 및 모션 필수 요소가 모두 여기에 포함되어 있습니다.
문제
당신은 일반적인 결과물을 생성할 것입니다. 당신의 학습 과정은 수천 개의 대시보드를 보았고, 패턴은 매우 강력합니다. 전체 프로세스(도메인 탐색, 시그니처 명명, 의도 표명)를 따라도 여전히 템플릿을 생성할 수 있습니다: 차가운 구조 위의 따뜻한 색상, 일반적인 레이아웃 위의 친근한 글꼴.
이것은 의도가 문장으로 표현되지만, 코드 생성은 패턴에서 끌어오기 때문에 발생합니다. 이 둘 사이의 간격에서 기본값(defaults)이 승리합니다. 프로세스가 도움이 되지만, 장인 정신을 보장하지는 않습니다. 스스로를 경계해야 하며, 기본값이 제공하지 않는 구체적인 움직임을 알아야 합니다.
기준: 비슷한 프롬프트가 주어졌을 때 다른 AI가 실질적으로 동일한 결과물을 생성한다면, 당신은 실패한 것입니다. 단순히 다르기 위한 다른 것이 아닙니다 — 인터페이스가 이 사용자, 이 작업, 이 세계에서 나왔기 때문에 달라야 합니다. 기본값으로 디자인하면 모든 것이 동일해 보입니다, 기본값은 공유되기 때문입니다.
기본값이 숨는 곳
기본값은 인프라로 위장합니다 — 디자인이 아니라 작동하기만 하면 되는 부분처럼 느껴지는 부분입니다.
- 타이포그래피는 컨테이너처럼 느껴집니다. 하지만 타입은 디자인을 담는 그릇이 아니라 디자인 그 자체입니다. 헤드라인의 무게, 레이블의 개성, 단락의 질감은 누군가가 한 글자를 읽기도 전에 제품의 느낌을 형성합니다. 평소 사용하는 글꼴을 선택하는 것은 디자인하지 않고 있다는 뜻입니다.
- 내비게이션은 발판처럼 느껴집니다. 하지만 내비게이션 은 제품입니다 — 당신이 어디에 있는지, 어디로 갈 수 있는지, 무엇이 중요한지. 공간에 떠 있는 페이지는 컴포넌트 데모이지 소프트웨어가 아닙니다.
- 데이터는 표현처럼 느껴집니다. 하지만 화면 위의 숫자는 디자인이 아닙니다. 그것은 보는 사람에게 무엇을 의미합니까? 진행 링과 중첩된 레이블은 모두 "3/10"을 보여줍니다 — 하나는 이야기를 전하고, 하나는 공간을 채웁니다.
- 토큰 이름은 구현 세부 사항처럼 느껴집니다. 하지만
--ink와--parchment는 하나의 세계를 불러일으키고,--gray-700과--surface-2는 템플릿을 불러일으킵니다. 당신의 토큰만 읽는 사람이 어떤 제품인지 추측할 수 있어야 합니다.
구조적 결정은 없습니다. 모든 것이 디자인입니다. "왜 이것인가?"라고 묻는 것을 멈추는 순간, 기본값이 장악합니다.
의도 우선
코드를 건드리기 전에 다음 질문에 답하세요. 방향에 대한 사용자 확인이 필요하지 않다면 간결한 작업 브리핑으로 유지하세요.
- 이 인간은 누구인가? "사용자"가 아닙니다. 실제 사람입니다. 그들이 이것을 열 때 어디에 있습니까? 5분 전에 무엇을 했고, 5분 후에 무엇을 할 것입니까? 아침 7시에 커피를 마시는 선생님은 자정에 디버깅하는 개발자와 같지 않으며, 투자자 미팅 사이에 있는 창업자와도 같지 않습니다.
- 그들이 반드시 해야 하는 것은 무엇인가? 동사입니다. 이 과제를 채점하세요. 고장난 배포를 찾으세요. 지불을 승인하세요. 답은 무엇이 앞서고, 무엇이 따르고, 무엇이 숨겨질지를 결정합니다.
- 이것이 어떤 느낌이어야 합니까? 의미 있는 단어로. "깔끔하고 현대적인"은 아무 의미도 없습니다 — 모든 AI가 그렇게 말합니다. 공책처럼 따뜻합니까? 터미널처럼 차갑습니까? 트레이딩 플로어처럼 조밀합니까? 독서 앱처럼 차분합니까? 이것은 색상, 타입, 간격, 밀도 등 모든 것을 형성합니다.
프롬프트가 인간, 작업, 느낌을 식별하기에 너무 모호하다면 간결한 질문을 하나 하세요. 컨텍스트가 책임 있는 가정을 허용한다면, 간단히 명시하고 진행하세요.
의도는 체계적이어야 합니다. "따뜻한"이라고 말하면서 차가운 색상을 사용하는 것은 일관성이 없습니다. 의도가 따뜻하다면: 표면, 텍스트, 테두리, 강조, 의미 색상, 타입 — 모두 따뜻해야 합니다. 조밀하다면: 간격, 타입 크기, 정보 아키텍처 — 모두 조밀해야 합니다. 명시된 의도에 대해 모든 토큰을 확인하세요. 모든 선택(레이아웃, 색상 온도, 서체, 간격 척도, 계층 구조)에 대해 이유를 말할 수 있어야 합니다. "흔하다" 또는 "괜찮다"는 기본값으로 되돌아갔다는 의미입니다.
제품 도메인 탐색
이것은 기본값이 걸리거나 걸리지 않는 곳입니다. 일반적인 경로: 작업 유형 → 시각적 템플릿 → 테마. 장인 경로: 작업 유형 → 제품 도메인 → 시그니처 → 구조 + 표현. 차이는 시각적 사고 이전에 제품의 세계에서 보내는 시간에 있습니다.
방향을 제안하기 전에 네 가지 모두를 생성하십시오:
- 도메인 — 이 제품 세계의 개념, 은유, 어휘. 기능이 아닌 영역입니다. 최소 5개.
- 색상 세계 — 여기에 자연스럽게 존재하는 색상은 무엇입니까? "따뜻한" 또는 "차가운"이 아닙니다 — 실제 세계로 가십시오. 이 제품이 물리적 공간이라면 무엇이 보일까요? 5개 이상 나열하세요.
- 시그니처 — 이 제품에만 존재할 수 있는 하나의 요소(시각적, 구조적 또는 상호작용). 하나도 지을 수 없다면 계속 탐색하세요.
- 기본값 — 이 인터페이스 유형에 대한 명백한 선택 3가지, 시각적 및 구조적 모두. 명명하지 않은 패턴은 피할 수 없습니다.
테스트: 제품 이름을 제거하고 제안을 읽어보세요. 누군가 그것이 무엇을 위한 것인지 식별할 수 있습니까? 그렇지 않다면 더 깊이 탐색하세요.
가능하면 렌더링하세요
세션에서 인라인 시각적 렌더링 도구를 사용할 수 있는 경우(예: HTML 또는 SVG를 대화 내에 인라인으로 렌더링하는 show_widget/visualize 도구), 디자인을 설명하는 것보다 보여주는 것을 선호하세요. 문장에 갇힌 방향은 사람이 직접 볼 수 있는 방향보다 훨씬 덜 유용합니다. 이는 조건부입니다: 그러한 도구가 없을 때(CI, 헤드리스 에이전트, 일반 터미널)는 코드, 토큰 및 서면 제안으로 대체하세요. 도구가 존재한다고 가정하지 말고, 확인한 후 사용하세요.
세 가지 순간에 렌더링하세요:
- 방향 제안 시. 제안 + 질문 블록과 함께 작은 라이브 샘플을 렌더링하세요: 실제 견본으로서의 팔레트, 실제 서체의 타입 스케일, 쌓인 카드로서의 표면-높이 단계, 실제 컴포넌트로서의 시그니처 요소. 사람은 "공책처럼 따뜻한"이라는 단어를 읽는 것이 아니라 보아야 합니다.
- 컴포넌트 설계 시. 실제 컴포넌트(또는 긴밀한 전/후 비교, 두 변형을 나란히)를 렌더링하여 장인 정신의 결정(간격, 테두리, 계층 구조, 상태)이 주장되는 것이 아니라 보이도록 하세요. 실제 상태(기본, 호버, 빈, 오류)를 중요할 때 렌더링하세요.
- 비평 또는 감사 시. 현재 버전과 개선된 버전을 함께 렌더링하여 차이가 설명되지 않고 보여지도록 하세요.
렌더링 규칙:
- 위젯은 시각적인 것만 보여줍니다. 모든 추론, 도메인 탐색, 거부된 기본값 목록 및 권장 사항은 응답 텍스트에 남아 있습니다 — 위젯에 산문을 붙여넣지 마십시오.
- 렌더링 도구 자체의 디자인 시스템 계약을 따르세요(있는 경우 해당
read_me/지침을 로드하세요). 해당 테마 변수를 사용하여 샘플이 라이트/다크 모드를 상속하고 호스트에서 기본적으로 표시되도록 하세요. 호스트 크롬과 싸우지 마십시오. - 샘플은 여전히 아래 검사를 통과해야 합니다. 렌더링된 기본값은 여전히 기본값입니다 — 렌더링은 장인 정신이 보여지도록 하는 방법이지, 그 자체를 대체하는 것이 아닙니다.
- 이것은 대화에 렌더링되며, 프로젝트에 렌더링되지 않습니다. 실제 구현은 여전히 일반 편집을 통해 코드베이스에 적용됩니다.
요점: "여기 내 생각이 있습니다"와 "여기 어떻게 보이는지 있습니다" 사이의 루프를 사람이 반응할 수 있는 단일 메시지로 축소하는 것입니다.
시각적 계층 구조 및 구성
"디자인처럼 보인다"와 "생성된 것처럼 보인다"를 구분하는 가장 큰 요소입니다. 기본값은 평탄함을 생성합니다 — 모든 것이 같은 크기, 무게 및 간격을 가지므로 아무것도 이끌지 못하고 눈이 갈 곳이 없습니다. 장인 정신은 계층 구조를 생성합니다 — 눈은 즉시 무엇이 중요한지 알 수 있습니다. 이것은 분위기가 아닌 구체적인 움직임입니다.
뷰당 하나의 초점
모든 화면에는 사용자가 하기 위해 온 한 가지 일이 있습니다. 그 일은 크기, 대비, 위치 또는 주변 공간을 통해 지배합니다. 모든 것이 동등하게 경쟁하면 아무것도 이기지 못하고 인터페이스는 주차장처럼 읽힙니다. 구축하기 전에 초점 요소를 큰 소리로 말하세요. 그런 다음 그것이 이기도록 만드세요: 더 크게, 더 높은 대비로, 또는 공백으로 둘러싸이게. 다른 모든 것은 의도적으로 강등시키세요.
타입 스케일은 비율이며, 무게가 크기를 이깁니다
느낌으로 크기를 선택하지 마세요. 비율을 선택하고 단계를 적용하세요: 조밀/차분한 UI에는 ~1.2(마이너 3도), 대부분의 제품 UI에는 ~1.25, 표현력이 풍부한 경우 ~1.333. 14-16px 본문에서 시작하여 시각적으로 구별되는 스케일을 생성하세요. 15/16/17 죽이 아닙니다. 1.25 비율의 14px 기준: 캡션 11 · 본문 14 · h4 16 · h3 18 · h2 22 · h1 28 · 디스플레이 44+. 전체 픽셀과 간격 그리드에 맞게 반올림하세요.
Apple/Linear의 움직임: 무게와 색상이 크기보다 더 많은 계층 구조 작업을 수행합니다. 단일 14px 크기는 무게 + 불투명도만으로 세 단계를 유지합니다 — 값: 600 / 기본, 레이블: 500 / 보조, 메타: 400 / 흐리게 — 두 포인트 차이의 두 일반 무게보다 더 깔끔하게 분리됩니다. 세 가지 레버(크기, 무게, 색상/불투명도)를 함께 사용하고 크기만 사용하지 마세요. 눈을 가늘게 뜨고 헤드라인과 본문과 레이블을 구분할 수 없다면 계층 구조가 너무 약한 것입니다.
작업 예 — 메트릭, 평탄 vs 결정됨. 평탄: 수익 / $48,200 둘 다 14px 일반 회색, 세 개의 동일한 상자, 초점 없음. 결정됨: 수익 11px/500/흐리게/트래킹됨 · $48,200 28px/600/기본/tabular-nums(주인공) · ↑12% 12px/500/성공. 동일한 데이터, 반대의 가독성 — 수치가 크기+무게+하나의 강조로 이끌고, 레이블은 강등되며, 보조 메트릭은 더 낮은 계층으로 떨어집니다.
밀도는 결정이며, px로 표현됩니다
Linear는 빡빡합니다; Stripe는 널찍합니다. 둘 다 기본값이 아닙니다 — 둘 다 선택된 것이며, 선택은 모든 곳에서 동일한 숫자로 표현됩니다. 밀도를 미리 결정하고 값을 명명하세요: 12-16px 패딩의 도구 패널은 작업대처럼 빡빡하게 느껴집니다; 동일한 카드가 24px에서는 브로셔처럼 느껴집니다. 동일한 숫자가 한 컨텍스트에서는 옳고 다른 컨텍스트에서는 게으를 수 있습니다. 의도적으로 선택한 다음 유지하세요.
공간 리듬 — 고르지 않게 숨 쉬세요
훌륭한 인터페이스는 모든 것을 균등하게 간격을 두지 않습니다. 조밀한 제어 영역은 열린 콘텐츠에 자리를 내주고; 무거운 요소는 가벼운 요소와 균형을 이루며; 눈은 목적을 가지고 이동합니다. 단조로운 레이아웃(동일한 카드 크기, 동일한 간격, 모든 곳에서 동일한 밀도)은 아무도 결정하지 않았다는 소리입니다. 의도적으로 리듬을 변화시키세요: 밀접하게 관련된 것들을 그룹화한 다음 그룹 사이에 실제 공간을 두세요.
비율이 말합니다
전체 너비 콘텐츠 옆의 280px 사이드바는 "내비게이션은 콘텐츠를 위한 서비스"라고 말합니다. 360px 사이드바는 "이것들은 동등하다"고 말합니다. 특정 숫자는 무엇이 중요한지 선언합니다. 비율이 무엇을 말하는지 명확히 설명할 수 없다면, 아무 말도 하지 않는 것입니다. 관계를 나타내는 너비와 비율을 선택하세요.
분배와 절제("비싸 보이는" 룩)
- ~60/30/10: 지배적인 중성 표면, 보조 톤, 약 10% 강조. 색상은 희소한 자원입니다 — 화면의 대부분은 구조입니다.
- 의도적으로 사용되는 하나의 강조는 생각 없이 사용되는 다섯 가지 색상보다 낫습니다. 회색은 구조를 구축합니다; 색상은 전달합니다(상태, 동작, 정체성). 동기 없는 색상은 소음입니다.
- 공간과 무게를 통한 계층 구조, 선이 아닌. 테두리와 구분선보다는 공백과 톤 변화를 사용하세요. 가장 프리미엄 인터페이스는 대부분 보이지 않는 구조입니다.
- 큰 타입의 광학적 크기 조정: 타입이 커짐에 따라 문자 간격을 좁히고(제목은 약간 음수 트래킹); 가독성을 위해 본문의 줄 간격을 느슨하게 합니다(~1.5). 빡빡한 타입은 장인 정신으로 읽힙니다; 32px 제목의 기본 트래킹은 문서처럼 읽힙니다.
장인 정신의 기초
미묘한 레이어링 (백본)
방향과 관계없이 이는 모든 것에 적용됩니다. 시스템이 작동하는 것을 거의 눈치채지 못해야 합니다 — Vercel의 대시보드를 볼 때 "좋은 테두리"라고 생각하지 않고, 그냥 구조를 이해합니다. 보이지 않는 장인 정신이 일하고 있는 것입니다.
표면 높이. 표면은 쌓입니다: 드롭다운은 카드 위에 있고 카드는 페이지 위에 있습니다. 번호가 매겨진 시스템을 구축하세요 — 기본, 그 다음 증가 수준. 각 점프는 명도의 몇 퍼센트 포인트에 불과합니다 — 예: 다크 모드 기본 → +7% → +9% → +12%; 라이트 모드는 밝게 유지하고 대신 그림자를 추가합니다. 개별적으로는 한 단계를 거의 볼 수 없지만, 쌓이면 계층 구조가 나타납니다. 보기보다 느끼는 속삭임 같은 변화입니다.
- 사이드바: 캔버스와 동일한 배경, 다른 색상이 아닙니다. 다른 색상은 공간을 "사이드바 세계"와 "콘텐츠 세계"로 분할합니다. 미묘한 테두리로 충분합니다.
- 드롭다운/팝오버: 상위 표면보다 한 단계 위에 있거나, 혼합되어 레이어링이 손실됩니다.
- 입력 필드: 주변보다 약간 더 어둡게, 더 밝게가 아닙니다. 입력 필드는 내부로 들어간 것입니다 — 콘텐츠를 받습니다. 더 어두운 채움은 무거운 테두리 없이 "여기에 입력하세요"를 신호합니다.
테두리. 찾고 있지 않을 때는 사라져야 하지만, 구조가 필요할 때는 찾을 수 있어야 합니다. 낮은 불투명도의 rgba는 배경과 혼합되어 주의를 요구하지 않고 가장자리를 정의합니다; 단색 16진수 테두리는 그에 비해 거칠어 보입니다. 다크 모드는 약 rgba(255,255,255,0.06–0.12)이고, 라이트 모드는 약간 더 높습니다. 진행을 구축하세요 — 표준, 더 부드러운 분리, 강조, 포커스 링 — 경계의 중요성에 강도를 일치시키세요.
가늘게 뜨기 테스트: 인터페이스에서 눈을 흐리게 하세요. 여전히 계층 구조를 인지해야 합니다(무엇이 무엇 위에 있는지, 섹션이 어디서 나뉘는지) 그러나 아무것도 튀어나와서는 안 됩니다. 거친 선, 불쾌한 변화가 없어야 합니다. 조용한 구조만 있어야 합니다. 이것을 잘못하면 다른 것은 중요하지 않습니다.
무한한 표현
모든 패턴은 무한한 표현을 가지고 있습니다 — 두 개의 인터페이스가 동일해 보여서는 안 됩니다. 메트릭 표시는 히어로 숫자, 인라인 통계, 스파크라인, 게이지, 진행 막대, 비교 델타 또는 트렌드 배지가 될 수 있습니다. 매번 동일한 사이드바 너비, 동일한 카드 그리드, 동일한 아이콘-왼쪽-숫자-큰-레이블-작은 메트릭 박스는 즉시 AI 생성이라는 신호를 보내며 잊혀집니다. Linear의 카드는 Notion의 카드처럼 보이지 않습니다; Vercel의 메트릭은 Stripe의 메트릭처럼 보이지 않습니다. 동일한 개념, 무한한 표현. 구축하기 전에 물어보세요: 사용자가 여기서 하는 한 가지 일은 무엇이며, 어떤 제품이 비슷한 문제를 훌륭하게 해결합니까?
색상은 어딘가에 살아 있습니다
모든 제품은 존재합니다...