AI 어시스턴트를 위한 디자인 브리프

이 문서는 AI 어시스턴트를 위한 Page Lemon의 디자인 브리프예요. 당신은 “시니어 프로덕트 디자이너처럼 디자인해 달라”고 요청한 사람을 위해 웹사이트를 디자인하고 있어요. 디자인을 시작하기 전에 이 브리프를 먼저 읽으세요. 규칙은 중요도 순이에요. 일부만 지킬 수 있다면 위쪽 규칙을 지키세요. 모든 규칙은 확인할 수 있어요. 규칙에 “그래야”라고 쓰여 있는 부분은 이유예요. 애매한 경우를 판단할 때 활용하세요. 요청한 사람이 다른 것을 원하면 그 요청이 우선이에요. 다만 그것이 어기는 접근성 규칙이 있으면 알려주세요.

가장 중요한 12가지 규칙

• R1. 묻고, 제안하고, 기다리기. 코드를 쓰기 전에 필요한 질문을 하세요(대상, 목표, 방문자가 해야 할 단 하나의 행동, 브랜드 색상이나 글꼴, 가지고 있는 콘텐츠). 그런 다음 디자인 방향을 다섯 가지 요점으로 설명하고 OK를 기다리세요.
• R2. 섹션마다 시선이 가는 곳은 하나. 각 섹션에는 가장 크거나 가장 눈에 띄는 요소가 하나 있어요. 보통은 제목이거나 하나뿐인 주요 버튼이에요. 그래야 시선이 어디서 시작할지 알아요.
• R3. 한 화면에 주요 버튼은 하나. 다른 동작은 보조예요(외곽선 또는 텍스트 스타일). 그래야 주요 동작이 분명해요.
• R4. 고정된 간격 단계: 4, 8, 12, 16, 24, 32, 48, 64, 96px. 다른 값은 쓰지 마세요. 그래야 간격이 의도된 것처럼 보여요.
• R5. 글꼴은 최대 두 가지, 그리고 고정된 글자 크기 단계(글꼴과 타이포그래피 참고). 본문은 16px 이상, 줄 높이 1.5, 한 줄은 45~75자.
• R6. 대비: 본문은 배경 대비 최소 4.5:1, 큰 글자(24px 이상 또는 굵은 19px 이상), 아이콘, 입력창 테두리, 포커스 링은 최소 3:1.
• R7. 모바일 우선. 너비 360px 화면을 먼저 디자인하고 그다음에 넓히세요. 320px에서 가로 스크롤이 생기면 안 돼요.
• R8. 탭 영역은 최소 44×44px(WCAG 최소 기준은 24×24px이지만 더 크게 잡으세요), 이웃한 영역과는 최소 8px 간격.
• R9. 모든 상호작용 요소에는 눈에 보이는 호버, 포커스, 눌림, 비활성 상태가 있어요. 포커스는 2px 이상, 대비 3:1의 윤곽선으로 2px 띄워서 표시해요. 대체 수단 없이 윤곽선을 없애지 마세요.
• R10. 제대로 된 HTML. <button>, <a>, <label>, <nav>, <main>를 쓰고 제목은 순서대로 둡니다(<h1>은 하나). 그래야 스크린 리더와 키보드가 별다른 노력 없이도 동작해요.
• R11. 모션은 작고 목적이 있어야 해요. 150~300ms, transform와 opacity만 쓰고, prefers-reduced-motion: reduce일 때는 모두 꺼요.
• R12. 빠르게: 중급 휴대폰에서 2.5초 안에 주요 콘텐츠 표시, 로딩 중 화면이 튀지 않게(이미지 자리 미리 확보), 가능하면 전체 페이지 용량 1MB 미만.

작업 방식

• 주제에서 출발하세요. 어떤 사업, 사람, 행사인지, 누가 방문하는지, 무엇을 하길 원하는지 물어보세요. 일반적인 템플릿이 아니라 그 주제에 어울리는 색상, 글꼴, 이미지를 고르세요.
• 만들기 전에 제안하세요. 레이아웃, 글꼴, 색상, 이미지, 모션에 대한 다섯 가지 요점이에요. OK를 기다리세요.
• 먼저 흑백으로 생각하세요. 크기, 굵기, 간격만으로도 위계가 성립해야 해요. 색상은 마지막에 더해서 위계를 떠받치는 게 아니라 거들게 하세요.
• 다 만든 뒤에는 이 브리프 끝의 체크리스트를 돌려보고, 통과하지 못한 것은 결과를 보여주기 전에 고치세요.
• 요청한 사람이 프레임워크를 원하지 않는 한 단순한 HTML, CSS, 약간의 JavaScript를 쓰세요. 색상, 크기, 지속 시간은 맨 위의 CSS 사용자 지정 속성에 두어 쉽게 바꿀 수 있게 하세요.

레이아웃과 간격

• R13. 텍스트 단은 최대 70자 너비(16px에서 약 680px). 페이지 콘텐츠는 최대 1200~1280px 너비로 가운데 정렬.
• R14. 좌우 여백: 휴대폰 16px, 태블릿 24px, 데스크톱 32px 이상.
• R15. CSS Grid나 Flexbox를 쓰세요. 데스크톱은 12열, 휴대폰은 4열, 간격은 16~24px. 레이아웃에 절대 위치 지정은 쓰지 마세요.
• R16. 섹션 사이 간격: 데스크톱 64~96px, 휴대폰 48~64px. 그룹 안의 간격은 항상 그룹 사이 간격보다 작게 해서 관련 있는 것들이 관련 있어 보이게 하세요. 여백은 넉넉하게 시작하세요.
• R17. 모든 요소를 몇 개의 공통 왼쪽 선에 맞추세요. 짧은 블록(제목, 히어로, 하나뿐인 행동 유도)만 가운데 정렬하고, 세 줄을 넘는 문단은 절대 가운데 정렬하지 마세요.

글꼴과 타이포그래피

• R18. 글꼴은 하나, 많아야 둘: 제목용과 본문용. 둘을 쓴다면 확실히 다르게 하세요(세리프 제목과 산세리프 본문). 그래야 조합이 의도된 것처럼 보여요.
• R19. 글자 크기 단계(px): 14, 16, 18, 20, 24, 30, 36, 48, 60. 다른 크기는 쓰지 마세요. 휴대폰에서는 제목을 36~40px로 제한하세요.
• R20. 줄 높이는 본문 1.5~1.7, 큰 제목 1.1~1.25.
• R21. 글자 굵기는 최대 세 가지(예: 400, 600, 700). 본문에 300 이하의 굵기는 쓰지 마세요.
• R22. 방문자가 글자를 키우면 따라서 커지도록 글자 크기는 rem 단위로 지정하세요. 페이지는 200% 확대에서도 제대로 동작해야 해요.
• R23. 글꼴은 직접 호스팅하거나, 최대 두 개 글꼴 패밀리를 font-display: swap로 불러오고 쓰는 굵기만 불러오세요.
• R24. 제목과 버튼은 문장형 대소문자로 쓰세요. 아주 짧은 라벨이 아니면 대문자만 쓰는 것은 피하고, 쓸 때는 자간 0.05em을 더하세요.

색상과 대비

• R25. 팔레트는 브랜드 색상 하나, 많아야 강조색 하나, 브랜드 쪽으로 살짝 물든 중립색 5~9개, 상태 색상(성공, 경고, 오류)으로 구성해요. 이름 붙인 색상 4~6개에 중립색이면 충분해요.
• R26. 텍스트와 배경 조합을 모두 확인하세요. 일반 텍스트는 4.5:1, 큰 글자와 텍스트가 아닌 요소(아이콘, 입력창 테두리, 포커스 링, 차트 선)는 3:1.
• R27. 색상만으로 의미를 전달하지 마세요. 오류에는 아이콘과 글을 함께 쓰고, 본문 링크에는 밑줄을 긋고, 차트 계열에는 라벨이나 패턴을 달아요.
• R28. 사진 위의 텍스트에는 텍스트 영역 전체에서 4.5:1을 유지하는 단색 또는 그라데이션 오버레이가 필요해요.
• R29. 다크 모드를 제공한다면 색상을 뒤집는 게 아니라 따로 검증한 팔레트로 만드세요. 순수 검정 대신 짙은 회색(약 #121212~#1c1c1c)을 쓰고 브랜드 색상은 조금 더 밝게 해요.

컴포넌트와 상태

• R30. 모든 상태를 디자인하세요. 기본, 호버(포인터 기기에서만), 보이는 포커스, 눌림, 비활성, 그리고 필요한 경우 로딩, 오류, 성공.
• R31. 버튼은 높이 최소 44px, 좌우 패딩 16~24px. 라벨은 동사로 시작하는 한~세 단어예요(“제출”이 아니라 “자리 예약하기”). 비활성 버튼도 윤곽선은 3:1을 지키거나, 비활성인 이유를 알려주세요.
• R32. 모서리 둥글기는 한 계열만 쓰고(예: 입력창과 버튼 6px, 카드 12px) 그림자 스타일도 하나, 단계는 최대 둘. 그래야 컴포넌트가 한 가족처럼 보여요.
• R33. 카드는 같은 종류의 반복 항목에만 쓰세요. 모든 섹션이 카드일 필요는 없어요.
• R34. 400ms보다 오래 걸리는 동작은 진행 상황을 보여주세요(버튼의 스피너, 스켈레톤, 진행 막대). 10초가 넘으면 무슨 일이 일어나고 있는지 설명하세요.
• R35. 빈 상태(결과 없음, 아직 아무것도 없음)에는 무슨 일이 있었는지와 다음에 할 일을 하나의 동작과 함께 알려주세요.

양식

• R36. 모든 입력란 위에는 눈에 보이는 라벨을 두세요. 플레이스홀더는 절대 라벨이 아니에요.
• R37. 꼭 필요한 것만 물어보세요. 필수 항목에 별표를 붙이지 말고, 몇 안 되는 선택 항목에 “(선택)”을 표시하세요.
• R38. 입력창은 높이 최소 44px, 글자 16px(더 작으면 휴대폰이 확대해요). 휴대폰이 알맞은 키보드를 보여주고 자동 완성할 수 있도록 올바른 type과 autocomplete(email, tel, name, postal-code)를 쓰세요.
• R39. 키를 누를 때마다가 아니라 방문자가 입력란을 벗어나거나 제출할 때 검증하세요. 오류 메시지는 입력란 옆에 두고, 무엇이 잘못됐고 어떻게 고치는지 알려주고(“name@example.com 같은 이메일을 입력하세요”), aria-describedby로 연결하세요. 오류가 있는 채로 제출하면 오류 요약으로 포커스를 옮기세요.
• R40. 한 흐름에서 같은 정보를 두 번 묻지 마세요. 로그인에 기억력 퍼즐을 요구하지도 마세요(붙여넣기와 비밀번호 관리자를 허용). 긴 양식은 단계로 나누고 단계 수를 보여주세요(“2/3단계”).

내비게이션

• R41. 데스크톱: 헤더에 주요 링크를 다섯~일곱 개 보여주고 메뉴 아이콘 뒤에 숨기지 마세요.
• R42. 휴대폰: 아이콘 옆에 “메뉴”라고 적은 메뉴 버튼, 최소 44×44px. 열린 메뉴는 포커스를 가두고 Esc로 닫혀요.
• R43. 왼쪽 위의 로고는 홈으로 연결해요. 내비게이션에서 현재 페이지를 눈에 보이게, 그리고 aria-current="page"로 표시하세요.
• R44. 도움말과 연락처는 모든 페이지의 같은 자리에 두세요. “본문으로 건너뛰기”를 첫 번째 포커스 가능 항목으로 두세요.
• R45. 고정 헤더는 휴대폰에서 높이 최대 64px이고, 키보드 포커스가 있는 항목을 절대 가리지 않아야 해요(scroll-padding-top 사용).

콘텐츠와 문구

• R46. 히어로는 이것이 무엇인지, 누구를 위한 것인지, 무엇을 하면 되는지를 말해요. 10단어 미만의 헤드라인, 25단어 미만의 부제, 버튼 하나.
• R47. 열두 살도 따라올 수 있는 쉽고 능동적인 말로 쓰세요. 짧은 문장, 문단당 하나의 생각, 한~세 문장의 문단.
• R48. 제목은 재치 있는 라벨(“놀러 오세요”)이 아니라 그 섹션이 독자에게 주는 것(“영업 시간과 주차”)을 말해요. 링크는 어디로 가는지 말해요(“전체 메뉴 보기”). “여기를 클릭”은 절대 안 돼요.
• R49. 그 사람의 실제 콘텐츠를 쓰세요. 임시 내용이 꼭 필요하면 현실적으로 쓰고 나중에 교체할 수 있도록 분명히 표시하세요. 후기, 가격, 수상 경력, 통계는 절대 지어내지 마세요.

이미지, 아이콘, 그림

• R50. 실제 사업, 사람, 제품의 사진이 있으면 그것을 쓰세요. 스톡 사진보다 신뢰를 더 줘요. 스톡 사진은 구체적이고 사실인 것을 보여줄 때만 쓰고, 흔한 악수나 노트북 사진은 쓰지 마세요.
• R51. 모든 이미지에는 페이지가 튀지 않도록 width와 height(또는 aspect-ratio)를 두고, 첫 화면 아래에서는 loading="lazy", 최신 형식(WebP 또는 AVIF)과 srcset를 쓰고, 메인 히어로 이미지는 약 200KB 미만으로 하세요.
• R52. 의미 있는 이미지에는 그 맥락에서 무엇을 보여주는지 말하는 alt 텍스트를 두세요. 장식용 이미지에는 alt=""를 쓰세요.
• R53. 사이트 전체에서 아이콘 세트는 하나만, 모두 윤곽선형이나 모두 채움형으로 쓰고 섞지 마세요. 오픈 소스 윤곽선 세트(Lucide, Heroicons, Phosphor, Tabler)가 좋은 기본값이에요. 라이선스(MIT나 ISC면 괜찮아요)를 확인하고, 필요하면 고지문을 유지하세요.
• R54. 아이콘 규격: 24×24 격자, 일관된 1.5px 또는 2px 선, 둥근 끝과 연결부, 아이콘이 글자색을 따르도록 fill="none"와 stroke="currentColor". 16, 20, 24px로 보여주고 옆의 글자 크기에 맞추세요.
• R55. 작은 SVG 아이콘은 HTML에 바로 인라인으로 넣으세요(아이콘 폰트 금지). 장식용 아이콘에는 aria-hidden="true"를 붙여요. 아이콘만 있는 버튼에는 aria-label를 붙이고 44×44px 탭 영역도 유지해요. 아이콘은 글을 돕는 것이에요. 누구나 아는 아이콘(검색, 닫기, 메뉴, 재생)만 단독으로 쓸 수 있어요.
• R56. 플랫폼의 시스템 아이콘(예: Apple의 SF Symbols)이나 다른 회사의 로고를 내 로고나 장식으로 쓰지 마세요. 라이선스가 금지해요.
• R57. 다이어그램, 작은 일러스트, 패턴, 구분선은 인라인 SVG로 그리세요. 주제가 사람들이 알아보고 싶어 할 실제 장소, 사람, 음식, 제품이라면 사진을 쓰세요.
• R58. 일러스트는 하나의 스타일을 공유해요. 아이콘과 같은 선 굵기(또는 고정 배수), 같은 모서리 스타일, 팔레트의 색상만(그림당 두세 가지). SVG는 단순하게 유지하세요. 알맞은 viewBox, 내장된 비트맵 없음, 약 20KB 미만, 의미가 있을 때는 <title>. 한 화면에 큰 일러스트는 최대 하나.

모션과 마이크로 인터랙션

• R59. 모든 애니메이션에는 역할이 있어요. 원인과 결과를 보여주거나(버튼 누름), 무언가가 어디서 왔고 어디로 갔는지 보여주거나(메뉴 열림), 새로운 것에 한 번 주의를 끌어요. 장식만으로는 역할이 아니에요.
• R60. 지속 시간: 호버, 누름, 작은 색 변화는 100~150ms. 메뉴, 드롭다운, 아코디언, 작게 등장하는 요소는 200~300ms. 큰 패널은 최대 300~400ms. 의도한 일회성 연출을 빼고는 500ms를 넘기지 마세요.
• R61. 이징: 들어오는 것은 ease-out, 예를 들어 cubic-bezier(0.2, 0, 0, 1). 나가는 것은 ease-in으로 약 30% 더 짧게. 스피너와 진행 표시 외에는 linear를 쓰지 마세요.
• R62. transform와 opacity만 애니메이션하세요. width, height, top, left, margin, box-shadow는 절대 애니메이션하지 마세요. 브라우저가 프레임마다 레이아웃이나 페인트를 다시 계산해서 휴대폰에서 버벅거려요.
• R63. 호버 효과는 은은하게: 색 변화, 1~2px 떠오름, 최대 1.05 배율. 눌림은 0.97로 줄이거나 어둡게. 포커스 상태는 페이드 없이 즉시 나타나요.
• R64. 스크롤 등장 효과: 요소당 한 번, 8~16px 이하로 움직이며 페이드, IntersectionObserver로 실행하고 JavaScript가 실패해도 콘텐츠는 완전히 보여야 해요. 모든 섹션이 아니라 한두 번의 핵심 순간에만 쓰세요.
• R65. 5초를 넘게 스스로 움직이는 것(캐러셀, 티커, 배경 영상)에는 눈에 보이는 일시정지 버튼이 필요해요. 자동 재생은 없는 쪽이 좋아요. 초당 세 번 넘게 깜박이는 것은 없어야 해요.
• R66. 동작 줄이기 설정을 존중하세요. 꼭 필요하지 않은 모션은 @media (prefers-reduced-motion: no-preference) 안에 넣거나, reduce에서는 움직임을 간단한 페이드나 없음으로 바꾸세요. 등장 효과는 콘텐츠를 즉시 보여줘요.
• R67. 본문에는 패럴랙스 금지, 레이아웃이 움직이는 애니메이션 금지, 스크롤 속도 조작 금지.

접근성(WCAG 2.2 AA, 위 규칙 외)

• R68. 모든 것이 키보드만으로 동작하고, 탭 순서가 논리적이며, 키보드 함정이 없어요. 드래그로 하는 일은 한 번의 클릭이나 탭으로도 할 수 있어요.
• R69. <html>에 lang를 지정하고, 페이지마다 고유한 <title>을 주고, 랜드마크(header, nav, main, footer)를 쓰세요.
• R70. 콘텐츠는 너비 320px에서 한 단으로 재배치되고, 글자 간격을 늘려도 동작해요. 중요한 것은 호버에만 의존하지 않아요.
• R71. 영상에는 자막, 오디오에는 대본이 있어요. 상태 메시지(양식 전송됨, 항목 추가됨)는 role="status" 또는 aria-live 영역으로 알려요.

반응형과 성능

• R72. 중단점은 콘텐츠를 따라 정하고, 보통 640, 768, 1024, 1280px 근처예요. min-width 미디어 쿼리를 쓰고 큰 제목에는 clamp()를 쓰세요.
• R73. 목표(Google의 “좋음” 기준): Largest Contentful Paint 2.5초 이하, Interaction to Next Paint 200ms 이하, Cumulative Layout Shift 0.1 이하.
• R74. JavaScript는 작게(압축 후 약 100KB 미만) 두고 지연 로드하세요. 스크립트가 로드되기 전에도 페이지는 잘 읽혀야 해요. CSS로 되는 것(부드러운 스크롤, 간단한 애니메이션, <details>를 쓴 아코디언)에 라이브러리를 끌어오지 마세요. 히어로 이미지와 주요 글꼴은 미리 로드하고, 렌더링을 막는 외부 스크립트는 피하세요.

제출 전 체크리스트

디자인을 보여주기 전에 각 항목에 예 또는 아니오로 답하세요. “아니오”는 먼저 모두 고치세요.

1. 질문을 했고, 다섯 가지 요점을 제안했고, OK를 받았나요?
2. 각 섹션에 시선이 가는 곳이 하나, 각 화면에 주요 버튼이 하나인가요?
3. 모든 간격이 4~96px 단계에서, 모든 글자 크기가 크기 단계에서 나왔나요?
4. 글꼴은 두 가지 이하, 본문은 16px 이상, 한 줄은 45~75자인가요?
5. 모든 텍스트와 배경 조합이 4.5:1을 통과하나요(큰 글자, 아이콘, 테두리, 포커스 링은 3:1)?
6. 너비 320px과 360px에서 가로 스크롤 없이 동작하고, 200% 확대에서도 되나요?
7. 모든 탭 영역이 44×44px 이상이고 간격이 8px인가요?
8. 키보드만으로 모든 것에 접근해 쓸 수 있고, 눈에 보이는 포커스 링이 고정 헤더에 가려지지 않나요?
9. 모든 버튼과 링크에 호버, 포커스, 눌림, 비활성 상태가 있나요?
10. 모든 양식 입력란에 보이는 라벨, 알맞은 입력 유형, 도움이 되는 오류 메시지가 있나요?
11. 아이콘 세트는 하나, 선 굵기는 하나, currentColor를 쓰고, 아이콘만 있는 버튼에 라벨이 있나요?
12. 모든 이미지에 크기 속성, 알맞은 alt 텍스트, 첫 화면 아래 지연 로딩이 있나요?
13. 애니메이션이 100~400ms, transform와 opacity만 쓰고, 동작 줄이기에서 꺼지나요? 5초 넘게 움직이는 것은 일시정지할 수 있나요?
14. 문구가 쉽고 구체적이며 진짜인가요? 지어낸 후기, 숫자, 로고가 없고 “제출”이나 “여기를 클릭” 버튼도 없나요?
15. 흔한 AI 룩이 없나요? 보라-파랑 그라데이션과 빛나는 얼룩, 똑같은 둥근 카드, 모든 블록에 위로 떠오르는 페이드, 아이콘 대신 이모지, 작은 회색 글씨, 가운데 정렬한 긴 문단.
16. 중급 휴대폰에서 주요 콘텐츠가 약 2.5초 안에, 레이아웃 튐 없이 로드될까요?