Toothpick: AI 특유의 느낌을 제거하고, 오래가는 인터페이스를 만들어 내세요

이 가이드가 무엇인가요

여기에는 "이 폰트를 항상 사용하라"거나 "그 색은 절대 사용하지 마라"와 같은 규칙이 없습니다. 어떤 색, 서체 또는 레이아웃이든 사용할 수 있습니다.

이 가이드는 두 가지를 합니다:

AI 특유의 느낌을 인식하도록 돕습니다: 어떤 선택이 AI의 생각 없는 기본값이며, 사람들이 왜 그것을 즉시 알아채는지 알려줍니다.
일반적인 결함을 피하도록 돕습니다: 인터페이스를 거칠고, 싸구려 같거나, 프로페셔널하지 않게 보이게 만드는 실수들을 알려줍니다.

한 가지 테스트가 있습니다: 이 선택이 이 제품을 위해 이루어졌습니까, 아니면 어떤 제품이든 했을 선택입니까? 후자가 바로 AI 특유의 느낌입니다.

사용자의 명시적인 스타일, 브랜드 가이드라인 및 기존 코드 스타일은 항상 우선합니다. 사용자가 요청한 것이 아래에 나열된 "AI 특유의 느낌" 중 하나라도 마찬가지입니다.

AI 특유의 느낌이란

모든 디자인 결정에서 AI는 가장 일반적인 옵션으로 기울어집니다. 이는 두 가지 레이어로 나타납니다.

첫 번째 레이어, 오래된 클리셰: 보라색에서 파란색으로 가는 그라데이션, 아이콘으로 사용된 이모지, 회색 그림자가 있는 동일한 둥근 카드, "가운데 정렬된 헤드라인 + 세 개의 기능 카드" 랜딩 페이지, "무한한 가능성을 열어보세요"와 같은 카피. 많은 사람들이 이미 이것들을 알아봅니다.

두 번째 레이어, 취향이 있는 척: "AI가 만든 것처럼 보이지 마"라는 지시를 받으면, AI는 똑같이 고정된 다른 복장으로 갈아입습니다:

크림색 종이 배경, 큰 세리프 헤드라인, 테라코타 또는 진한 빨간색 강조색, "따뜻하고 세련된" 척
거의 검은색 배경, 하나의 네온 그린, 앰버 또는 버밀리온 강조색, 모든 곳에 고정폭 글꼴, "해커" 척
신문 스타일의 검은색 가는 선, 제로 테두리 반경, 빽빽한 컬럼, "스위스 스타일의 프로페셔널한" 척
모든 제목 위에 모두 대문자로 된 레이블, 모든 곳에 "A · B · C" 가운데 점 문자열, 모든 링크 뒤에 "→", 모든 작은 데이터 레이블에 고정폭 글꼴, 순서가 없는 콘텐츠에 "01 / 02 / 03"
거대한 장식용 숫자, 그 자체를 위한 비대칭, 장식으로 사용된 터미널 "$" 프롬프트 또는 "●" 상태 점

두 번째 레이어는 "디자인된" 것처럼 보이기 때문에 알아차리기 더 어렵습니다. 첫 번째 레이어와 같은 문제입니다: 스타일이 입혀진 것이지, 제품에서 성장한 것이 아닙니다.

전체 목록과 각 항목이 왜 AI처럼 읽히고 언제 실제로 괜찮은지는 references/ai-tells.md에 있습니다.

좋은 인터페이스는 어떻게 생겼나요

references/benchmarks.md에는 Vercel, GitHub, ChatGPT, Google, Linear의 측정값과 중국 제품인 DingTalk, Juejin, WeChat Read, sspai, 그리고 중국 인터페이스가 어떻게 다른지(더 무거운 제목, 더 높은 줄 높이, 더 작은 크기)에 대한 내용이 있습니다. 영어 레퍼런스가 공유하는 특징:

매우 적은 색상: 거의 전적으로 검정, 흰색, 회색, 그리고 하나의 기능적인 색상
하나의 서체 패밀리; 제목은 크지만 굵지는 않음
가벼운 구분: 여백, 희미한 가는 윤곽선, 매우 연한 그림자. 검은색 규칙이나 무거운 그림자가 아님
제품 자체가 주인공; 장식은 거의 0에 가까움
화면당 하나의 초점

이것들은 템플릿이 아닌 참고 자료입니다. 커피숍이 Vercel처럼 보여서는 안 되지만, 콘텐츠가 앞에 나오는 것만큼 절제되고 정밀해야 합니다.

참고 자료 자체가 새로운 기본값이 될 수 있습니다. 지난 몇 프로젝트의 이름을 가렸을 때 모두 흰색, 중립 회색, 알약 버튼, 얇은 테두리 패널로 나온다면, 참고 자료가 템플릿으로 변한 것입니다. 이를 사용하여 장인 정신을 측정하세요: 선이 얼마나 가벼운지, 그림자가 얼마나 부드러운지, 제목이 얼마나 얇은지. 색상, 재질 및 주인공은 2단계 목록에서 가져옵니다.

워크플로우

0. 먼저, 변경의 규모를 측정하세요

변경	예시	수행 단계
작음	색상, 간격 또는 카피 변경; 하나의 컴포넌트 수정; 버튼 추가	관련 코드와 스타일 변수를 읽고, 기존 스타일에서 변경하며, `references/ai-tells.md`의 관련 항목 몇 개를 확인하고, 한두 문장과 함께 전달합니다(플레이스홀더가 있는 경우에만 플레이스홀더 목록 포함)
중간	기존 제품 내의 새 페이지 또는 새 기능 화면	1단계, 3~~4줄 계획, 그다음 5~~7단계. 제품의 기존 스타일을 유지하고, 인벤토리와 논쟁은 생략합니다
큼	새 제품, 웹사이트, 랜딩 페이지, 리디자인	전체 7단계

확실하지 않으면 더 작은 규모를 선택하세요. 사용자가 더 많은 것을 요청할 것입니다. 버튼 하나에 디자인 계획을 작성하지 마세요.

1. 이것이 무엇인지 이해하세요: 먼저 프로젝트를 읽고, 그다음 방문자를 이해하세요

기존 프로젝트에서는 아무것도 건드리기 전에 먼저 읽으세요. 계획이나 코드를 작성하기 전에 다음을 알아내세요:
- 프로젝트가 실제로 가지고 있는 기능(README, 라우트, 페이지 및 API를 읽으세요. 페이지 제목으로 추측하지 마세요)
- 기존 컴포넌트, 스타일 변수, 아이콘 세트 및 폰트. 새 UI는 이들을 사용합니다. 병렬 시스템을 시작하지 마세요
- 데이터 모델과 API가 반환하는 실제 필드. 해당 필드 위에 UI를 구축하세요
- 카피의 기존 어휘. 같은 것을 같은 이름으로 계속 부르세요
"프로젝트가 가진 것"을 몇 줄로 적고, 그 위에 계획을 세우세요. 읽을 수 없는 것이 있으면(예: 백엔드가 리포지토리에 없는 경우), 사용자에게 묻거나 가정을 명확히 밝히세요.
제품이나 콘텐츠는 무엇인가요? 누구를 위한 것인가요? 이것이 불분명하면 구체적인 가정을 하고, 한 줄로 말한 다음, 반복해서 묻지 말고 진행하세요.
이 페이지의 모드를 결정하세요(제품이 아닌 페이지를 판단하세요: 개발자 도구의 홈페이지는 설득(Persuade), 대시보드는 작동(Operate)입니다):

모드	방문자에게 성공이 의미하는 바	예시	디자인 노력이 집중되는 곳
설득(Persuade)	결정하고 행동합니다	홈페이지, 랜딩 페이지, 캠페인, 가격	관점과 영향력; 실제 이미지로 설득
작동(Operate)	작업을 완료합니다	관리자, 대시보드, 편집기, 설정, 도구	스캔 가능하고, 일관되며, 효율적임; 개성은 정밀한 디테일에 존재
읽기(Read)	콘텐츠를 이해합니다	문서, 기사, 도움말 센터, 변경 로그	명확한 구조, 편안한 읽기 경험
전시(Showcase)	작업에 몰입합니다	포트폴리오, 갤러리, 사례 연구	작업이 주도하고, 인터페이스는 뒤로 물러남

참고 자료: 설득과 전시는 references/web.md를 사용하고, 작동은 references/app-desktop.md를 사용하며, 모바일은 추가로 references/mobile.md를 사용합니다. 프로젝트 README와 그 안의 마인드 맵 또는 다이어그램은 references/readme.md를 사용합니다.

미세 조정(Refinement)인가 리디자인인가? 미세 조정은 기존 스타일, 카피 및 동작을 유지하고 범위 내의 것만 변경합니다. 리디자인은 전반적인 모양을 대체하지만 제품 사실, 콘텐츠 및 기능은 유지합니다. 이전 스타일에 새 스타일을 반쯤 덧붙이지 마세요.

2. 이 주제에만 속하는 것들을 인벤토리로 만드세요

이 고객과 경쟁사에 속하지 않는 구체적인 것 8~12개를 적으세요: 이름과 그 의미, 거리와 도시, 문 번호와 상점 간판, 재료와 색상, 숫자(좌석 수, 고도, 업력), 제약 사항(한 달에 한 배치, 겨울에는 휴업), 의식(오븐은 5시에 켜짐), 그 세계의 인쇄된 것들(영수증, 라벨, 시간표).

디자인 아이디어는 이 목록에서 나와야 하며, "이 업계의 웹사이트는 보통 이렇게 생겼어"에서 나오지 않습니다. 우리가 참고한 오픈소스 스킬은 블라인드 테스트를 진행했는데, 승리한 페이지는 이러한 목록의 항목을 사용했고, 패배한 페이지는 일반적인 업계 아이디어에 기반한 좋은 구성을 가졌습니다.

3. 섹션을 선택하기 전에 논증을 작성하세요

마케팅 페이지의 모든 섹션은 주장과 그 증거여야 하며, 각각 한 줄이어야 합니다:

히어로: 이번 주 세 가지 로스트, 금요일 발송 → 증거: 세 개의 봉지, 로스트 날짜
원두: 각각 명확한 원산지와 풍미 → 증거: 실제 원산지, 고도, 커핑 노트
...

주장이 없는 섹션은 삭제하세요. 이렇게 하면 "히어로, 로고 월, 세 가지 기능, 사용 후기, 가격, FAQ"라는 정형화된 구조에서 벗어날 수 있습니다.

4. 짧은 계획을 작성하세요

색상: 각각이 사용되는 위치와 함께 4~6개 값
서체: 어떤 서체와 각각이 하는 역할
레이아웃: 아이디어에 대한 한 문장, 필요한 경우 간단한 ASCII 와이어프레임, 정렬
히어로: 이 페이지에서 가장 설득력 있는 것, 그리고 실제로 가지고 있는 에셋(존재하지 않는 이미지를 기준으로 디자인하지 마세요)
강도: 절제(Operate 및 Read의 기본값), 하나의 히어로(Persuade의 기본값: 인벤토리에서 하나의 대담한 이미지, 다른 모든 것은 조용하게), 또는 전체 콘셉트(아래 "강력한 콘셉트를 적용할 때" 참조)

5. 계획을 확인하세요: 기본값인가 선택인가?

비슷한 브리핑이 주어졌을 때, 거의 같은 계획에 도달했을까요? 그렇다면 그 부분은 기본값입니다. 2단계 목록에서 아이디어를 찾으세요.
references/ai-tells.md에 있는 항목과 일치하나요? 그렇다면 변경하거나, 이 제품에 이것이 필요한 이유를 말할 수 있어야 합니다.
콘텐츠보다 장식이 더 많나요?

무엇을 변경했고 그 이유를 답변에 간략히 말하세요.

6. 구축하세요

색상과 간격을 CSS 변수로 관리하세요. 선택자 특이성을 주시하여 클래스가 서로를 덮어쓰지 않도록 하세요(특히 섹션 패딩).
예제 콘텐츠는 실제이고 구체적이며, 숫자는 합산됩니다.
페이지가 제품의 인터페이스를 보여줄 때(예: SaaS 홈페이지의 스크린샷 슬롯), 해당 제품의 실제 조각으로 구축하세요: 실제 데이터, 합산되는 숫자, 하나의 명확한 발견. 회색 블록과 가짜 숫자가 아닙니다.
세부 공정은 references/craft-details.md에 있습니다.

7. 결과를 보고, 일괄적으로 수정한 다음, 하나를 제거하세요

실제 크기로 보세요: 데스크탑, 휴대폰(약 375px), 다크 모드(구축한 경우). 한 번 보고 모든 것을 함께 수정하세요. 매번 수정 후 스크린샷을 찍지 마세요.
checklist.md를 확인하세요.
집을 나서기 전에 거울을 확인하는 것처럼, 액세서리 하나를 제거하세요.
결과를 볼 수 없을 때(모델이 이미지를 읽을 수 없거나 브라우저가 없는 경우): 본 척 하지 마세요. 대신 코드를 검토하세요: 각 중단점에서 가장 긴 텍스트가 컬럼에 맞는지, 색상 값에서 계산된 대비 비율은 무엇인지, 모든 상호작용 상태가 작성되었는지 확인하세요. 전달 시 브라우저에서 보지 못했다고 말하고, 사용자에게 데스크탑과 휴대폰 스크린샷을 각각 한 장씩 요청하여 다시 검토하세요.

절제는 공허함이 아닙니다

장식을 제거하는 것은 절반의 작업일 뿐입니다. 라벨, 규칙 및 카드를 잃고 그 자리에 아무것도 얻지 못한 페이지는 얄팍하게 읽히며, 여전히 AI 특유의 느낌이 약간 있는 더 풍부한 페이지에 질 수 있습니다. 나머지 절반은 실질(substance) 입니다: 더 대담한 서체 스케일, 색상의 전체 필드, 이 주제 세계의 실제 사진, 모든 섹션이 전체 콘텐츠로 채워져야 합니다.

강력한 콘셉트를 적용할 때

절제는 기본값이지 한계가 아닙니다. 전체 페이지 시각적 콘셉트(만화, 신문, 기술 도면, 티켓)는 다음 모든 조건이 충족될 때 적합합니다:

출처가 있습니다: 사용자가 요청했거나, 주제 자체의 세계가 이 언어를 말합니다(건축가의 도면, 인쇄소의 교정쇄, 철도 시간표). 2단계 목록에서 찾을 수 있어야 합니다.
모든 장치가 콘텐츠에 매핑됩니다: 매핑을 기록하세요. 예: "스피드 라인: 쌓이는 요청", "스크린톤 밀도: 잠금의 무거움". 매핑할 수 없는 장치는 버리세요.
여전히 정확하게 읽힙니다: 코드, 숫자, 표 및 버튼을 오류 없이 읽고 클릭할 수 있습니다. 콘셉트는 콘텐츠를 위해 봉사하며 사람들이 오독하게 해서는 안 됩니다.
사실은 변하지 않습니다: 새 스타일은 모든 제품 사실, 기능, 숫자 및 플레이스홀더 목록을 유지합니다.
멈출 때를 압니다: 메인 라인에서는 완전히 사용하고 디테일에서는 절제를 유지하세요. 모든 구석에 테마 요소를 넣지 마세요.

이 중 하나라도 실패하면, 하나의 히어로로 돌아가세요: 히어로 또는 하나의 섹션에서만 그 언어를 사용하세요. 스타일 코스튬과의 차이점: 코스튬은 어떤 제품에도 맞습니다(크림과 세리프, 거의 검은색과 네온, 신문 가는 선); 강력한 콘셉트는 이 제품에만 의미가 있습니다.

전달할 때 디자인 아이디어를 한두 문장으로 설명하여 사용자가 쉽게 방향을 바꿀 수 있도록 하고, 플레이스홀더 목록을 첨부하세요("아무것도 가짜로 만들지 말고, 개발자를 속이지 마세요" 참조).

사용자가 변경을 요청할 때

사용자가 말하는 것	의미
더 대담하게	더 큰 스케일 대비, 색상의 전체 필드, 더 큰 히어로. 더 많은 장식이 아닙니다
더 조용하게 / 너무 복잡함	더 적은 색상과 움직임, 더 적은 서체 크기, 보조 요소 제거
간소화	주장이 없는 섹션과 요소를 삭제하세요. 핵심을 유지하세요
더 다듬기	세공: 정렬, 간격, 반경, 그림자, 상태, 브라우저 네이티브 부분
출시할 준비가 되었나요?	오류, 빈 상태, 매우 긴 콘텐츠, 다른 언어, 엣지 케이스

아무것도 가짜로 만들지 말고, 개발자를 속이지 마세요

사용자와 개발자 모두 무엇이 실제이고 무엇이 아직 완료되지 않았는지 알 수 있어야 합니다.

최종 사용자 앞에서는 가짜가 없어야 합니다

발명된 로고, 고객 로고 월 또는 파트너 배지가 없어야 합니다. "$", "▲" 또는 "●"와 같은 기호로 조합된 가짜 로고가 없어야 합니다. 로고가 없으면 일반 텍스트로 된 제품 이름으로 충분합니다.
발명된 사용자 수, 만족도, 성장 수치, 사용 후기 또는 언론 보도가 없어야 합니다.
전문적인 사실을 확인하세요(기술 세부 사항, 표준, 규정, 의학, 재무, 통계). AI는 이러한 것을 유창하게 작성하며, 실수도 똑같이 유창하게 보입니다:
- 페이지에 있는 전문적인 주장을 나열하세요. 문서나 표준에서 확인할 수 있는 것은 찾아보고, 코드 주석에 출처를 인용하세요.
- 확인할 수 없는 것은 생략하거나 플레이스홀더 목록에 "미확인"으로 나열하세요.
- 페이지의 숫자는 서로 일치해야 합니다(초당 70개 요청을 41초 동안 처리하면 총 2,870개 요청).

개발자를 속이는 것은 없어야 합니다

발명된 기능이 없어야 합니다: 인터페이스에 표시된 모든 기능은 프로젝트에 존재하거나 명시적으로 요청된 것이어야 합니다. 페이지를 더 좋게 보이게 하기 위해 "스마트 추천" 또는 "원클릭 내보내기"를 추가하지 마세요.
모의 데이터는 실제 데이터인 척 해서는 안 됩니다: 가능하면 실제 API에 연결하세요. 연결할 수 없으면 모의 데이터를 한 곳(예: mock/)에 유지하고, 실제 API와 동일한 필드를 사용하며, 코드에 모의 데이터임을 표시하세요. 페이지가 "완료된" 것처럼 보이게 하기 위해 컴포넌트에 매력적인 숫자를 하드코딩하지 마세요.
가짜 상호작용이 없어야 합니다: 연결되지 않은 버튼, 양식 또는 링크는 작동하는 척하는 클릭 애니메이션을 가져서는 안 됩니다. 비활성화하고 "연결되지 않음"이라고 표시하거나, 전달 노트에 나열하세요.
처음부터 구축된 데모 및 콘셉트는 가상의 브랜드와 데이터를 사용할 수 있지만, 페이지는 예시임을 명시해야 합니다.

플레이스홀더 목록을 첨부하세요

... (문서가 잘렸습니다)

toothpick

toothpick란 무엇인가요?

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

문서