인터페이스 디자인

최고의 디자인 팀(Linear, Vercel, Stripe, Apple)의 장인정신으로 제품 인터페이스를 구축하세요. 이들과 일반 결과물의 차이는 재능이 아닙니다. 모든 결정이 '의도적으로' 이루어졌고, 계층 구조가 명확하며, 수많은 작은 디테일이 동시에 올바르다는 점입니다. 이 스킬이 바로 그 목표에 도달하는 방법입니다.

범위

사용 대상: 대시보드, 관리자 패널, SaaS 앱, 도구, 설정 페이지, 데이터 인터페이스.

사용하지 않음: 랜딩 페이지, 마케팅 사이트, 캠페인, 브랜드 전용 작업. 이러한 경우 마케팅/프런트엔드 디자인 스킬을 사용하세요.

이 스킬은 자체 완결적입니다: 방향성, 시각적 계층 구조, 디자인 시스템 아키텍처, 그리고 제품 출시 수준의 UI를 제공하는 데 필요한 다듬기와 모션 필수 요소가 모두 포함되어 있습니다.

문제

당신은 일반적인 결과물을 생성할 것입니다. 당신의 학습 데이터는 수천 개의 대시보드를 보았고, 패턴은 강력합니다. 전체 과정(도메인 탐색, 시그니처 명명, 의도 진술)을 따를 수 있지만, 여전히 템플릿을 생성할 수 있습니다: 차가운 구조 위의 따뜻한 색상, 일반적인 레이아웃 위의 친근한 글꼴.

이는 의도는 글 속에 존재하지만, 코드 생성은 패턴에서 비롯되기 때문에 발생합니다. 그 사이의 간격이 기본값이 승리하는 지점입니다. 프로세스는 도움이 되지만, 장인정신을 보장하지는 않습니다. 스스로를 경계해야 하며, 기본값이 사용하지 않는 구체적인 움직임을 알아야 합니다.

기준: 유사한 프롬프트가 주어졌을 때 다른 AI가 본질적으로 동일한 출력을 생성한다면, 당신은 실패한 것입니다. 다름을 위한 다름이 아니라, 인터페이스가 '이' 사용자, '이' 작업, '이' 세계에서 나왔기 때문에 달라야 합니다. 기본값으로 디자인하면 모든 것이 동일해 보입니다. 기본값은 공유되기 때문입니다.

기본값이 숨는 곳

기본값은 인프라로 위장합니다. 단지 작동하면 되고 설계할 필요가 없다고 느껴지는 부분들입니다.

타이포그래피는 컨테이너처럼 느껴집니다. 그러나 타입은 디자인을 담는 것이 아니라, 디자인 '그 자체'입니다. 제목의 굵기, 레이블의 개성, 단락의 질감은 누군가가 한 글자를 읽기 전에 제품의 느낌을 형성합니다. 평소 사용하는 글꼴을 선택하는 것은 디자인하지 않겠다는 뜻입니다.
내비게이션은 발판처럼 느껴집니다. 하지만 내비게이션은 '곧' 제품입니다. 당신이 어디에 있는지, 어디로 갈 수 있는지, 무엇이 중요한지를 나타냅니다. 공간에 떠 있는 페이지는 소프트웨어가 아니라 컴포넌트 데모입니다.
데이터는 프레젠테이션처럼 느껴집니다. 그러나 화면의 숫자는 디자인이 아닙니다. 그것을 보는 사람에게 '무엇을 의미'합니까? 진행 링과 누적 레이블은 모두 "3/10"을 표시합니다. 하나는 이야기를 전달하고, 다른 하나는 공간을 채웁니다.
토큰 이름은 구현 세부 사항처럼 느껴집니다. 그러나 --ink와 --parchment는 세계를 불러일으키고, --gray-700와 --surface-2는 템플릿을 불러일으킵니다. 당신의 토큰만 읽는 사람이 이 제품이 무엇인지 추측할 수 있어야 합니다.

구조적 결정은 없습니다. 모든 것이 디자인입니다. "왜 이렇게?"라고 묻지 않는 순간, 기본값이 지배하기 시작합니다.

의도 우선

코드를 건드리기 전에 다음 질문에 답하세요. 방향성에 사용자 확인이 필요하지 않다면 간결한 작업 브리프로 유지하세요.

이 사람은 누구인가? '사용자'가 아닙니다. 실제 사람입니다. 그들은 이것을 열 때 어디에 있습니까? 5분 전에 무엇을 했고, 5분 후에는 무엇을 할까요? 7시에 커피를 마시는 교사는 자정에 디버깅하는 개발자와 같지 않으며, 투자자 미팅 사이에 있는 창업자와도 다릅니다.
그들은 무엇을 성취해야 하는가? 동사입니다. 과제를 평가합니다. 고장난 배포를 찾습니다. 지불을 승인합니다. 답변은 무엇이 앞서고, 무엇이 따르며, 무엇이 숨겨질지를 결정합니다.
이것은 어떤 느낌이어야 하는가? 의미 있는 단어로 표현하세요. "깔끔하고 현대적인"은 아무 의미도 없습니다. 모든 AI가 그렇게 말합니다. 공책처럼 따뜻합니까? 터미널처럼 차갑습니까? 트레이딩 플로어처럼 빽빽합니까? 독서 앱처럼 차분합니까? 이것은 색상, 타입, 간격, 밀도 등 모든 것을 결정합니다.

프롬프트가 사람, 작업, 느낌을 식별하기에는 너무 모호하다면, 간결한 질문을 하나 하세요. 컨텍스트가 책임 있는 가정을 허용한다면, 간략하게 명시하고 진행하세요.

의도는 체계적이어야 합니다. "따뜻하게"라고 말하고 차가운 색상을 사용하는 것은 일관성이 없습니다. 의도가 따뜻하다면: 표면, 텍스트, 테두리, 강조색, 의미론적 색상, 타입 — 모두 따뜻해야 합니다. 빽빽하다면: 간격, 타입 크기, 정보 아키텍처 — 모두 빽빽해야 합니다. 명시된 의도에 대해 모든 토큰을 확인하세요. 모든 선택(레이아웃, 색온도, 서체, 간격 척도, 계층 구조)에 대해 '왜'라고 말할 수 있어야 합니다. "일반적이다" 또는 "잘 작동한다"는 기본값으로 돌아갔다는 의미입니다.

제품 도메인 탐색

이것이 기본값이 잡히거나 잡히지 않는 곳입니다. 일반적인 경로: 작업 유형 → 시각적 템플릿 → 테마. 장인 경로: 작업 유형 → 제품 도메인 → 시그니처 → 구조 + 표현. 차이는 시각적 사고 이전에 제품의 세계에서 보내는 시간에 있습니다.

방향을 제안하기 전에 네 가지를 모두 생성하세요:

도메인 — 이 제품 세계의 개념, 은유, 어휘. 기능이 아닌 '영역'입니다. 최소 5개.
색상 세계 — 여기에 '자연스럽게' 존재하는 색상은 무엇입니까? "따뜻한" 또는 "차가운"이 아니라 실제 세계로 가세요. 이 제품이 물리적 공간이라면 무엇이 보일까요? 5개 이상 나열하세요.
시그니처 — 이 제품에만 존재할 수 있는 한 가지 요소(시각적, 구조적 또는 상호작용). 이름을 지을 수 없다면 계속 탐색하세요.
기본값 — 이 인터페이스 유형에 대한 3가지 명백한 선택(시각적 및 구조적 모두). 이름을 지정하지 않은 패턴은 피할 수 없습니다.

테스트: 제품 이름을 제거하고 제안서를 읽으세요. 누군가 그것이 무엇을 위한 것인지 식별할 수 있습니까? 그렇지 않다면 더 깊이 탐색하세요.

가능할 때 렌더링하세요

세션에 인라인 시각적 렌더링 도구(예: 대화 내에 HTML 또는 SVG를 인라인으로 렌더링하는 show_widget / visualize 도구)를 사용할 수 있다면, 디자인을 '설명'하는 것보다 '보여주는' 것을 선호하세요. 글로 설명된 방향은 사람이 볼 수 있는 것보다 훨씬 덜 유용합니다. 이는 조건부입니다: 이러한 도구가 없는 경우(CI, 헤드리스 에이전트, 일반 터미널) 코드, 토큰 및 서면 제안으로 대체하세요. 도구가 존재한다고 가정하지 말고 확인한 후 사용하세요.

세 가지 순간에 렌더링하세요:

방향 제안할 때. Suggest + Ask 블록과 함께 실제 견본을 렌더링하세요: 실제 색상 견본으로 구성된 팔레트, 실제 서체의 타입 스케일, 쌓인 카드 형태의 표면 고도 단계, 실제 컴포넌트 형태의 시그니처 요소. 사람은 "공책처럼 따뜻한"을 '보아야' 하고, 단어를 읽지 않아야 합니다.
컴포넌트를 디자인할 때. 실제 컴포넌트(또는 빡빡한 before/after, 두 변형을 나란히)를 렌더링하여 장인 결정(간격, 테두리, 계층, 상태)을 주장이 아닌 시각적으로 보여주세요. 중요한 상태(기본, 호버, 비어 있음, 오류)를 렌더링하세요.
비판하거나 감사할 때. 현재 버전과 개선된 버전을 함께 렌더링하여 차이를 설명이 아닌 시각적으로 보여주세요.

렌더링 시 규칙:

위젯은 '시각적' 요소만 표시합니다. 모든 추론, 도메인 탐색, 거부된 기본값 목록 및 권장 사항은 응답 텍스트에 남겨두세요. 위젯에 글을 붙여넣지 마세요.
렌더링 도구 자체의 디자인 시스템 계약을 준수하세요(read_me/가이드가 있다면 로드하세요). 테마 변수를 사용하여 견본이 라이트/다크 모드를 상속하고 호스트에 기본적으로 표시되도록 하세요. 호스트 크롬과 싸우지 마세요.
견본은 여전히 아래 검사를 통과해야 합니다. 렌더링된 기본값은 여전히 기본값입니다. 렌더링은 장인정신을 '보여주기' 위한 수단이지, 대체물이 아닙니다.
이것은 '대화'에 렌더링되며, 프로젝트가 아닙니다. 실제 구현은 일반 편집을 통해 코드베이스에 적용됩니다.

요점: "여기 내 생각이 있습니다"와 "여기 어떻게 보이는지 있습니다" 사이의 루프를 사람이 반응할 수 있는 단일 메시지로 축소하는 것입니다.

시각적 계층 구조 및 구성

'디자인된 것처럼 보인다'와 '생성된 것처럼 보인다'를 구분하는 가장 큰 요소입니다. 기본값은 '평탄함'을 생성합니다. 모든 것이 같은 크기, 굵기, 간격을 가지므로 아무것도 이끌지 못하고 시선이 갈 곳이 없습니다. 장인정신은 '계층 구조'를 생성합니다. 시선은 무엇이 중요한지 즉시 알 수 있습니다. 이는 분위기가 아닌 구체적인 움직임입니다.

뷰당 하나의 초점

모든 화면에는 사용자가 수행하러 온 한 가지 작업이 있습니다. 그 작업이 크기, 대비, 위치 또는 주변 공간을 통해 지배적이어야 합니다. 모든 것이 동등하게 경쟁하면 아무것도 이기지 못하고 인터페이스는 주차장처럼 읽힙니다. 구축하기 전에 초점 요소를 소리 내어 말하세요. 그런 다음 더 크게, 더 높은 대비로, 또는 공백으로 둘러싸서 승리하게 만드세요. 다른 모든 것은 의도적으로 낮추세요.

타입 스케일은 비율이며, 굵기가 크기를 이깁니다

크기를 느낌으로 선택하지 마세요. 비율을 선택하고 단계적으로 적용하세요: 빽빽/차분한 UI의 경우 ~1.2(단3도), 대부분의 제품 UI의 경우 ~1.25, 표현적인 경우 ~1.333입니다. 14–16px 본문에서 시작하면 '눈에 띄게' 구별되는 스케일이 생성되며, 15/16/17px와 같은 죽은 스케일이 아닙니다. 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/기본/표 형식 숫자 (히어로) · ↑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의 메트릭과 같지 않습니다. 동일한 개념, 무한한 표현입니다. 구축하기 전에 스스로에게 물어보세요: 사용자가 여기서 하는 '한 가지' 작업은 무엇이며, 어떤 제품이 유사한 문제를 훌륭하게 해결합니까?

색상은 어디에나 존재합니다

모든 제품은 특정한 색상 세계에 존재합니다. 색상이 없는 제품은 없습니다. 단지 선택되지 않았을 뿐입니다. 각 제품 유형에는 자연스러운 색상 생태계가 있습니다. 재무 대시보드는 재무 세계의 색상을 사용합니다. 헬스케어 패널은 임상 환경의 색상을 사용합니다. 개발자 도구는 터미널의 색상을 사용합니다. 색상을 '선택'할 때는 이 세계에서 가져오세요. '멋져 보이니까'가 아닙니다.

색상은 그 자체로 존재하지 않습니다. 항상 '표면'에 있습니다. 배경, 텍스트, 테두리, 아이콘, 차트. 각 표면은 색상이 어떻게 작동하는지에 대한 고유한 요구 사항이 있습니다. 텍스트는 읽을 수 있어야 합니다. 배경은 지지해야 합니다. 테두리는 정의해야 합니다. 아이콘은 일치해야 합니다. 평평한 디자인 시스템이 아닌 '레이어드' 디자인 시스템을 구축하려면 각 표면의 요구 사항을 이해해야 합니다.

색상 시스템을 구축할 때:

색조, 채도, 명도로 생각하세요. 색상 이름(파란색, 빨간색)이 아닌 속성(차가운 파란색, 따뜻한 빨간색)으로 생각하세요. 이것은 선택하는 색상과 이유를 이해하는 데 도움이 됩니다.
제한된 팔레트로 시작하세요. 소수의 색상(아마 3-4개)으로 시작하고 필요에 따라 확장하세요. 더 쉽게 추가하는 것보다 더 쉽게 제거하는 것이 낫습니다.
색상은 일관된 작업을 수행해야 합니다. 빨간색이 항상 위험을 의미한다면, 모든 곳에서 위험을 의미해야 합니다. 파란색이 항상 링크를 의미한다면, 모든 곳에서 링크를 의미해야 합니다. 색상에 일관된 의미론적 부하를 부여하세요.
접근성을 염두에 두고 테스트하세요. 좋아 보이는 색상은 모든 사람에게 좋아 보이지 않을 수 있습니다. 색상 선택이 WCAG 가이드라인을 충족하는지 확인하세요.

모션은 의미를 전달합니다

모든 전환에는 이유가 있어야 합니다. 모션은 단순히 예뻐 보이기 위한 것이 아닙니다. 의미를 전달하고, 주의를 안내하며, 연속성을 제공합니다. 모션을 추가할 때는 다음을 고려하세요:

무엇이 변하고 있습니까? 요소의 위치, 크기, 불투명도 또는 내용이 변하고 있습니까? 각 유형의 변화에는 다른 모션이 필요합니다.
변화는 왜 발생합니까? 사용자 작업입니까, 시스템 이벤트입니까, 아니면 상태 변화입니까? 각 트리거에는 다른 모션 응답이 필요합니다.
변화는 얼마나 중요합니까? 사소한 변화는 미묘해야 합니다. 주요 변화는 명확해야 합니다.
변화의 관계는 무엇입니까? 요소가 연결되어 있습니까, 독립적입니까, 아니면 계층적입니까? 관계는 모션이 동시에 발생해야 하는지, 순차적으로 발생해야 하는지, 아니면 파급되어야 하는지를 결정합니다.

좋은 모션은 빠르고, 부드럽고, 자연스러운 느낌입니다. 200-300ms는 대부분의 UI 전환에 적합한 지속 시간입니다. 더 빠른 메시지에는 100-150ms, 더 복잡한 변화에는 400-500ms입니다. 이징 곡선은 자연스러운 움직임을 모방해야 합니다. 갑작스러운 시작과 정지 대신, 가속 및 감속합니다.

출시 준비

이것이 단지 예뻐 보이는 프로토타입이 아니라, 출시 가능한 제품이 되도록 보장하는 체크리스트입니다.

모든 상태를 디자인하세요. 행복한 경로만 디자인하지 마세요. 빈 상태, 오류 상태, 로딩 상태, 가장자리 사례 — 이 모든 것이 디자인이 필요합니다. 건너뛴 상태는 배송 시 깨진 상태입니다. 빈 테이블은 아무것도 없는 공백이 아닙니다. 행동을 안내하거나 정보를 제공해야 합니다. 오류 상태는 사용자에게 무슨 일이 일어났는지, 왜 일어났는지, 그리고 무엇을 할 수 있는지 알려야 합니다.

변경 사항에 응답하세요. 사용자가 무언가를 할 때, 인터페이스는 응답해야 합니다. 호버, 포커스, 활성화, 비활성화, 선택됨, 로딩, 성공, 오류 — 모든 상호작용 상태에는 시각적 피드백이 필요합니다. 클릭하거나 호버하거나 입력할 때 아무 일도 일어나지 않으면 인터페이스가 죽은 것처럼 느껴집니다.

출시될 데이터로 테스트하세요. 실제 데이터가 어떻게 보일지 생각하지 않고 디자인하는 것은 쉽습니다. 더미 데이터가 완벽하게 맞습니다. 실제 데이터는 항상 예상치 못한 긴 문자열, 이상한 숫자, 이상한 이미지 비율을 가지고 있습니다. 디자인이 실패하는 곳에서 테스트하세요: 가장 긴 사용자 이름, 가장 큰 숫자, 가장 이상한 데이터 포인트.

일반적인 실수를 확인하세요:

'거의' 같은 색상을 나란히 사용하지 않았나요? 너무 가까워서 같은 색으로 보이지만 충돌을 일으키는 색상은 인터페이스가 지저분해 보이게 만듭니다.
모든 곳에서 동일한 구성 요소를 재사용하고 있나요? 재사용은 효율적이지만, 모든 상황에 적합하지는 않습니다. 때로는 전용 구성 요소가 더 나은 결과를 제공합니다.
주요 결정을 문서화했나요? 누군가가 당신의 디자인을 맡아서 왜 특정 선택이 이루어졌는지 알 수 있어야 합니다.
접근성을 확인했나요? 색상 대비, 포커스 표시기, 키보드 내비게이션 — 이 모든 것이 중요합니다.

AI 감사 체크리스트

다음 조건 중 하나라도 충족되면 스스로 중단하고 재평가하세요:

작업 흐름

이것을 순차적인 프로세스가 아닌 의사 결정 프레임워크로 생각하세요. 각 단계는 이전 단계에 대해 알려주고, 어느 시점에서든 돌아갈 수 있습니다.

의도 설정: 사람, 작업, 느낌을 식별하세요. 간결한 작업 브리프를 만드세요.
도메인 탐색: 도메인, 색상 세계, 시그니처, 기본값을 수집하세요.
제안: 방향을 제시하세요(suggest + ask). 가능하면 렌더링하세요.
디자인: 컴포넌트와 레이아웃을 구축하세요. 계층 구조, 장인정신, 상태에 집중하세요.
감사: AI 감사 체크리스트를 사용하여 검토하세요. 필요한 경우 다시 디자인하세요.
출시: 모든 상태, 변경 사항, 실제 데이터를 확인하세요.

전체 프로세스를 한 번에 거칠 필요는 없습니다. 때로는 한 컴포넌트, 한 화면, 또는 완전한 기능을 디자인해야 할 수도 있습니다. 프레임워크를 상황에 맞게 조정하되, 프로세스의 각 부분의 기본 원칙을 잊지 마세요.

CxElegy/interface-design

interface-design란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

인터페이스 디자인

범위

문제

기본값이 숨는 곳

의도 우선

제품 도메인 탐색

가능할 때 렌더링하세요

시각적 계층 구조 및 구성

뷰당 하나의 초점

타입 스케일은 비율이며, 굵기가 크기를 이깁니다

밀도는 px로 표현된 결정입니다

공간 리듬 — 고르지 않게 숨 쉬기

비율이 말합니다

분배와 절제 ("고급스러운" 느낌)

장인 정신 기반

미묘한 레이어링 (백본)

무한한 표현

색상은 어디에나 존재합니다

모션은 의미를 전달합니다

출시 준비

AI 감사 체크리스트

작업 흐름

Individual skills in this repo

CxElegy/animation-performance

관련 스킬

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me