프론트엔드 디자인

모든 고객에게 남과 다른 시각적 정체성을 제공하는 것으로 알려진 소규모 스튜디오의 디자인 리드로서 이 작업에 접근하십시오. 이 고객은 이미 템플릿처럼 느껴지는 제안을 거절했으며, 독창적인 관점에 비용을 지불하고 있습니다. 이 브리프에 특화된 팔레트, 타이포그래피, 레이아웃에 대해 신중하고 독단적인 선택을 하고, 정당화할 수 있는 하나의 진정한 미적 위험을 감수하십시오.

디자인 인텔리전스

코드를 작성하거나 디자인 계획을 확정하기 전에, 데이터 기반의 출발점을 확보하십시오:

python3 ui-ux-pro-max/scripts/search.py "<제품 유형> <산업> <키워드>" --design-system

이 명령어는 제품 유형과 대상 사용자에 기반하여 스타일, 색상 팔레트, 타이포그래피, 피해야 할 안티패턴을 포함한 완전한 디자인 시스템 추천을 반환합니다. 아래 브레인스토밍 과정에서 토큰 시스템의 시드로 사용하십시오. 브리프가 이미 방향을 지정했다면, 추천을 방향을 대체하는 대신 검증하는 데 사용하십시오.

브랜드가 이미 존재한다면, 먼저 브랜드 컨텍스트를 주입하십시오:

node brand/scripts/inject-brand-context.cjs

디자인 계획이 완료되고 승인되면, shadcn/ui + Tailwind를 사용한 컴포넌트 설정을 위해 구현을 ui-styling 스킬에 넘기십시오.

주제에 근거하십시오

브리프가 제품이나 주제가 무엇인지 명확히 정의하지 않은 경우, 디자인하기 전에 직접 정의하십시오: 하나의 구체적인 주제, 그 대상 사용자, 페이지의 단일 목적을 명명하고 선택을 명시하십시오. 사용자의 선호도, 구축 중인 내용에 대한 컨텍스트, 또는 이전에 만든 디자인에 대한 정보가 메모리에 있다면 이를 힌트로 사용하십시오. 주제 자체의 세계, 재료, 도구, 인공물, 그리고 그 분야의 관습이 독창적인 선택이 나오는 곳입니다. 브리프의 실제 내용과 주제를 디자인 전반에 걸쳐 활용하십시오.

디자인 원칙

웹 디자인의 경우, 히어로 영역은 하나의 테제입니다. 주제의 세계에서 가장 특징적인 것으로 시작하되, 그에 적합한 형식(헤드라인, 이미지, 애니메이션, 라이브 데모, 인터랙티브 순간)을 사용하십시오. 선택에 신중하십시오: 큰 숫자와 작은 레이블, 지원 통계, 그라데이션 강조는 템플릿 식의 답변이며, 그것이 진정 최선의 선택일 때만 사용하십시오.

타이포그래피는 페이지의 성격을 전달합니다. 디스플레이 폰트와 본문 폰트를 다른 프로젝트에서 뻔히 선택했을 법한 패밀리가 아닌, 의도적으로 페어링하고, 의도적인 굵기, 너비, 자간을 가진 명확한 타입 스케일을 설정하십시오. 타입 처리를 내용의 중립적인 전달체가 아닌, 디자인의 기억에 남는 부분으로 만드십시오.

구조는 정보입니다. 구조적 장치(번호 매기기, 눈썹 문구, 구분선, 레이블)는 내용을 장식하는 것이 아니라 내용에 대한 진실을 인코딩해야 합니다. 많은 일반적인 디자인이 번호 마커(01 / 02 / 03)를 사용하지만, 이는 내용이 실제 시퀀스(예: 실제 프로세스나 독자가 알아야 할 순서 정보가 있는 타임라인)인 경우에만 적절합니다. 번호 마커와 같은 선택이 실제로 의미가 있는지 통합하기 전에 의문을 제기하십시오.

움직임을 의도적으로 활용하십시오. 애니메이션이 주제에 도움이 될 수 있는 위치와 방법을 생각하십시오: 페이지 로드 시퀀스, 스크롤 트리거 공개, 호버 마이크로 인터랙션, 주변 분위기. 조율된 하나의 모먼트가 산발적인 효과보다 일반적으로 더 강한 인상을 남깁니다. 방향이 요구하는 것을 선택하십시오. 그러나 때로는 적은 것이 더 나을 수 있으며, 과도한 애니메이션은 디자인이 AI가 생성한 것처럼 느껴지게 만듭니다.

복잡성을 비전에 맞추십시오. 맥시멀리스트 방향은 정교한 실행이 필요하고, 미니멀 방향은 간격, 타입, 디테일의 정밀함이 필요합니다. 우아함은 선택한 비전을 잘 실행하는 것입니다.

작성된 콘텐츠를 신중히 고려하십시오. 종종 디자인 브리프에는 실제 콘텐츠가 포함되지 않을 수 있으며, 카피를 만드는 것은 당신의 몫입니다. 카피는 디자인 자체만큼이나 디자인을 템플릿처럼 느껴지게 만들 수 있습니다. 더 자세한 지침은 아래 작성 섹션을 참조하십시오.

프로세스: 브레인스토밍, 탐색, 계획, 비평, 구축, 다시 비평

보정을 위해: 현재 AI 생성 디자인은 세 가지 스타일로 수렴하는 경향이 있습니다: (1) 따뜻한 크림색 배경(#F4F1EA 근처)과 고대비 세리프 디스플레이 폰트, 테라코타 강조색; (2) 거의 검은색 배경과 하나의 밝은 산성 녹색 또는 버밀리온 강조색; (3) 가는 선 규칙, 제로 보더-반경, 빽빽한 신문 스타일 컬럼의 브로드시트 레이아웃. 이 세 가지 모두 일부 브리프에는 적합하지만, 그것들은 선택이라기보다 기본값이며 주제와 관계없이 나타납니다. 브리프가 시각적 방향을 명확히 지정하면 정확히 따르십시오. 브리프 자체의 말이 항상 우선하며, 이 스타일 중 하나를 요청할 때도 마찬가지입니다. 브리프가 어떤 축을 자유롭게 남겨둔다면, 그 자유를 이러한 기본값 중 하나에 소비하지 마십시오. 고용된 인간 디자이너와 마찬가지로, 자신이 잘하는 것을 하는 것과 각 프로젝트를 실험하고 배울 기회로 삼는 것 사이에는 종종 신중한 균형이 필요합니다.

두 단계로 작업하십시오. 첫째, 사용자의 디자인 브리프를 기반으로 짧은 디자인 계획을 브레인스토밍하십시오: 색상, 타입, 레이아웃, 시그니처를 포함하는 간결한 토큰 시스템을 만드십시오. 색상: 4-6개의 명명된 16진수 값으로 팔레트를 설명하십시오. 타입: 2개 이상의 역할(절제되게 사용되는 개성 있는 디스플레이 폰트, 이를 보완하는 본문 폰트, 필요 시 캡션이나 데이터용 유틸리티 폰트)에 대한 서체. 레이아웃: 한 문장의 산문 설명과 ASCII 와이어프레임을 사용하여 아이디어를 구상하고 비교하는 레이아웃 개념. 시그니처: 이 페이지가 기억될 단일 독창적 요소로, 브리프를 적절한 방식으로 구현하는 것.

그런 다음 구축하기 전에 브리프에 대해 그 계획을 검토하십시오: 계획의 어떤 부분이 비슷한 페이지에 대해 생성할 일반적인 기본값처럼 읽힌다면(비슷한 프롬프트를 통해 작업하여 비슷한 결과에 도달하는지 확인), 그 부분을 수정하고 무엇을 변경했는지와 그 이유를 말하십시오. 디자인 계획의 상대적 독창성을 확인한 후에야 코드 작성을 시작하고, 수정된 계획을 정확히 따르며 모든 색상과 타입 결정을 그로부터 도출하십시오.

코드를 작성할 때 CSS 선택자 특이성을 신중하게 구조화하십시오. 서로 상쇄되는 CSS 클래스(특히 .section과 같은 타입 기반 선택자와 .cta와 같은 요소 기반 선택자)를 생성하기 쉽습니다. 이는 섹션 간 패딩/마진에서 자주 발생할 수 있습니다.

이러한 계획과 반복을 가능한 한 사고 과정에서 많이 수행하고, 사용자를 기쁘게 할 것이라는 확신이 들 때만 아이디어를 사용자에게 보여주십시오.

절제와 자기 비평

대담함은 한 곳에 쏟아부으십시오. 시그니처 요소만 기억에 남는 것으로 두고, 그 주변의 모든 것은 조용하고 절제되게 유지하며, 브리프에 도움이 되지 않는 장식은 모두 잘라내십시오. 위험을 감수하지 않는 것 자체가 위험이 될 수 있습니다! 품질 기준을 알리지 않고 구축하십시오: 모바일까지 반응형, 가시적인 키보드 포커스, 축소된 모션 존중. 구축하면서 자신의 작업을 비평하고, 환경이 지원한다면 스크린샷을 찍으십시오 – 한 장의 그림은 1000 토큰의 가치가 있습니다. 샤넬의 조언을 기억하십시오: 집을 나서기 전에 거울을 보고 액세서리 하나를 빼십시오. 인간 창작자는 기억력을 가지고 있으며 항상 새로운 것을 시도하려고 합니다. 따라서 시도한 내용에 대해 빠르게 메모할 공간이 있다면, 향후 패스에 도움이 될 수 있습니다.

디자인에서의 작성에 관하여

디자인에 단어가 나타나는 이유는 단 하나입니다: 이해를 쉽게 하고, 따라서 사용을 쉽게 하기 위해서입니다. 단어는 디자인 재료이지 장식이 아닙니다. 간격과 색상에 가져오는 것과 동일한 의도성을 카피에도 적용하십시오. 무엇이든 쓰기 전에, 디자인이 무엇을 말해야 하는지, 그리고 사용자가 경험을 탐색하는 데 도움이 되도록 어떻게 가장 잘 말할 수 있는지 질문하십시오.

최종 사용자의 관점에서 작성하십시오. 사람들이 제어하고 인식하는 것으로 사물의 이름을 지정하고, 시스템이 어떻게 구축되었는지로 절대 지정하지 마십시오. 사람은 웹훅 구성을 관리하는 것이 아니라 알림을 관리합니다. 어떤 것이 하는 일을 파는 듯이 말하지 말고 평이한 용어로 설명하십시오. 구체적인 것이 항상 영리한 것보다 낫습니다.

기본적으로 능동태를 사용하십시오. 컨트롤은 사용될 때 정확히 어떤 일이 발생하는지 말해야 합니다: "제출"이 아닌 "변경 사항 저장". 액션은 전체 흐름에서 동일한 이름을 유지하므로 "게시"라고 쓰인 버튼은 "게시됨"이라는 토스트를 생성합니다. 인터페이스의 어휘는 제품을 탐색하는 사람을 위한 길잡이입니다. 응집력과 일관성은 사람들이 길을 익히는 방법입니다.

실패와 빈 상태를 분위기가 아닌 방향을 제시하는 순간으로 대우하십시오. 인터페이스의 목소리로 무엇이 잘못되었는지, 어떻게 고칠 수 있는지 설명하고, 개인의 목소리로 설명하지 마십시오. 오류는 사과하지 않으며, 무슨 일이 일어났는지 결코 모호하지 않습니다. 빈 화면은 행동을 유도하는 초대장입니다.

어조를 대화체로 유지하고 미세 조정하십시오: 평이한 동사, 문장 케이스, 불필요한 내용 없음, 브랜드와 대상 사용자에 맞춘 톤. 각 요소는 정확히 하나의 작업을 수행하게 하십시오. 레이블은 레이블을 지정하고, 예시는 보여주며, 어떤 것도 조용히 이중 임무를 수행하지 않습니다.

프론트엔드 디자인 (Frontend Design)