alfianm/bukan-template

Bukan Template (템플릿 아님)

한때 의뢰인이 "템플릿 같다"는 이유로 결과물을 거절했던 작은 스튜디오의 디자이너처럼 작업하세요. 의뢰인은 누구나 쓸 수 있는 프레임워크가 아닌, 독특한 시각에 비용을 지불합니다. 기준은 다음과 같습니다: 모든 시각적 선택에 대해 "왜 이 클라이언트에게 적합한가"라고 대답할 수 있어야 하며, "보통 이렇게 하니까"라고 대답해서는 안 됩니다.

두 가지 종류의 slop(형편없는 결과물)이 있습니다. 첫 번째는 템플릿입니다: 보라색 그라데이션, 이모지 아이콘, 세 개의 동일한 카드, 지어낸 숫자. 두 번째는 템플릿을 피했지만 디자인을 추가하지 않을 때 나타납니다: 텍스트, 가는 선, 빈 공간으로만 구성된 평범한 페이지, 마치 채색된 메모처럼 보입니다. 둘 다 의뢰인에게 똑같이 부끄러운 결과물입니다. 이 스킬은 이 두 가지 모두에 맞서 싸웁니다.

1. 먼저 페이지 유형 결정

이 두 가지 패밀리의 "좋은" 기준은 서로 반대이므로, 계획 초반에 유형을 명시하세요:

• 마케팅 페이지: 랜딩 페이지, 회사 소개, 포트폴리오, 초대장, 제품 사이트. 낯선 사람이 한 번 읽는 페이지로, 인상, 스토리, 미디어가 평가됩니다. 2~8항목을 따른 후, 9항목을 따르세요.
• 업무 도구: 대시보드, CRM, CMS, 관리자 패널, 내부 애플리케이션. 같은 사람이 매일 열어보는 페이지로, 명확성, 유용한 정보 밀도, 의사 결정 속도가 평가됩니다. 2~8항목을 따른 후, 10항목을 따르세요.

요청이 두 가지를 혼합한 경우 (대시보드 미리보기를 보여주는 제품 랜딩 페이지), 페이지 자체는 마케팅 페이지로 간주하고, 미리보기 내용만 10항목을 따르세요.

2. 주제(Subject)부터 시작

색상, 폰트, 레이아웃을 선택하기 전에, 세 줄을 작성하세요:

• 소유자는 누구이며, 경쟁사와 차별화되는 점은 무엇인가?
• 누가 페이지를 열고, 어디서 오며, 처음 10초 안에 무엇을 결정하려 하는가? 업무 도구의 경우: 사용자는 누구이며, 이 도구로 매일 어떤 결정을 내리는가?
• 주제 세계에서 가장 특징적인 한 가지: 재료, 도구, 장소, 관습, 일상적인 언어.

브리프는 종종 한 문장에 불과하며, 그것으로 충분합니다. 스스로 한 장소의 한 가지 사업 유형으로 좁히고, 가정을 한 문단으로 명시한 후 진행하세요. 이 문서나 references/에 있는 어떤 예시도 모방하지 마세요. 모방된 예시는 모든 페이지에 나타나게 됩니다. 계획 전에 최대 한 가지 질문만 허용되며, 그 답변이 방향을 바꿀 때만 가능합니다 (예: 사진 사용 가능 여부). 다른 내용은 인도 시 청구됩니다 (작업 프로세스 참조).

서로 다른 두 주제는 서로 다른 페이지로 끝나야 하며, 그 차이는 이 세 줄에서 비롯되어야 합니다. 동일한 프레임워크에 악센트 색상만 바꾸는 방식이 아닙니다.

3. 색상

모든 색상은 출처가 있어야 합니다. 주제 세계의 실제 사물(재료, 도구, 포장, 유니폼, 문서, 작업 공간)에서 4~6가지 색상을 가져와 각 색상의 출처를 한 구절로 작성하세요. 설명할 수 없는 색상은 아직 이유가 없는 것입니다. 역할 이름(--dasar, --teks, --aksen)을 가진 토큰으로 팔레트를 작성하고, 다크 모드 값을 포함하세요. 중성색은 회색일 필요가 없으며, 색온도는 악센트와 일관성을 유지해야 합니다. 본문 텍스트는 배경에 대해 최소 4.5:1의 명암비를, 큰 텍스트는 최소 3:1의 명암비를 가져야 합니다.

결정해야 할 사항:

• 보라색/인디고 그라데이션 (#6366f1 → #a855f7, 텍스트 그라데이션, 보라색 글로우, 로고 또는 아바타 그라데이션). 이것은 AI가 생성한 페이지의 가장 명확한 표시입니다. 어떤 그라데이션이든 브리프가 요청하거나 주제가 빛이나 전환에 관한 것인 경우에만 사용할 가치가 있습니다.
• 산업 고정관념: 건설에는 네이비와 오렌지, 건강에는 초록, 기업에는 파랑, 개발자에게는 검정과 보라. 팔레트가 산업 이름만으로 예측 가능하다면, 아직 결정되지 않은 것입니다. 재료의 색상이 우연히 고정관념과 일치한다면, 소량만 사용하고 지배적인 색상은 고정관념에서 벗어나도록 하세요.
• 프레임워크 기본 팔레트: Tailwind의 기본 회색조와 악센트. 클래스는 사용할 수 있지만, 색상은 직접 정의하세요.
• 이 스킬 자체의 시그니처는 테스트에서 드러나며 똑같이 의심해야 합니다: 하나의 노란색 악센트(#E3B2xx)가 있는 거의 검은색 배경; 모든 제목에 대문자 grotesk condensed; 시각적 요소로서 주제의 SVG 라인 아트; 어두운 잉크가 있는 아이보리 종이, 벽돌색 악센트, 레이블에 모노스페이스; "확립된" 느낌의 브리프에는 황동 악센트가 있는 큰 세리프; 크림색 배경의 에디토리얼 세리프; 주제가 녹색이 아님에도 지배적인 색상으로 사용되는 청록색, 세이지, 민트 또는 진한 녹색. 하나의 계획에 이 목록 중 두 가지가 포함되면, 선택이 아닌 습관입니다.

유형별 악센트 수 규칙: 마케팅 페이지는 하나의 악센트를 사용하고(9항목), 업무 도구는 색상을 데이터로 사용합니다(10항목).

4. 아이콘

이모지는 UI 아이콘이 아닙니다: 시스템마다 다르게 렌더링되고, 팔레트를 따르지 않으며, 생성된 결과물로 바로 읽힙니다. 대체 순서: 아이콘이 의미를 더하지 않으면 아이콘 없음 (아이콘은 내비게이션, 상태, 동작에 적합하며 장식용으로는 거의 사용되지 않음); 일관된 두께와 크기, currentColor 색상을 가진 일관된 인라인 SVG 세트 (Lucide, Heroicons, Phosphor, Tabler); 또는 하나의 스타일로 직접 그린 이미지. 아이콘을 파스텔 톤의 상자나 원 안에 자동으로 넣지 마세요.

5. 타이포그래피

Inter, Poppins, Roboto, Montserrat를 기본으로 사용하지 마세요. 브리프에 답하는 캐릭터 때문에 선택하고, 그 이유를 한 문장으로 작성하세요. 명확히 다른 역할을 가진 하나 또는 두 개의 패밀리. 의도적인 스케일 (예: 1.25 또는 1.333), 본문 텍스트 줄 길이는 80자 미만. 헤드라인에서 한 단어에 색상이나 그라데이션을 주지 말고, 분류 기능이 없으면 모든 제목 위에 작은 대문자 레이블을 배치하지 마세요.

6. 카피와 콘텐츠

방문자의 관점에서, 브로셔 언어가 아닌 자연스럽게 말하는 언어로 작성하세요. 어느 비즈니스에나 붙일 수 있는 문장은 피하세요 ("올인원 솔루션", "함께 미래를 만들어가다", "전문적이고 경험 많은 팀").

• 예시 콘텐츠는 허용되나, 숫자 주장은 금지. 브리프가 콘텐츠를 제공하지 않으면 구체적이고 그럴듯한 콘텐츠 (프로젝트 이름, 위치, 구체적인 서비스)를 만들고 예시로 표시하세요. 숫자 주장 (고객 수, 경력 연수, 평점, 백분율)은 브리프에 없는 경우 전혀 만들지 마세요.
• 카피는 디자인 자체를 설명하지 않음. 색상이나 모양에 대한 이유는 계획과 코드 주석에 있으며, 방문자가 읽는 텍스트에는 없습니다.
• 일관된 언어. 인도네시아어 사이트는 "All rights reserved", "Made with ❤️", "Get started"를 사용하지 않습니다. 버튼은 명확한 동사와 함께 사용하며, 끝에 화살표를 넣지 않습니다. 다른 언어의 사이트는 해당 언어로 동일한 원칙을 따릅니다.
• 사진 및 플레이스홀더. 실제 사진은 거의 항상 어떤 장식보다 강력하므로, 사용 가능 여부를 물어보세요. 아직 없는 경우, 플레이스홀더는 정직해야 합니다: 지정된 비율, 팔레트의 패턴이나 색상으로 채워지고, 어떤 사진이 필요한지 레이블을 지정해야 합니다. "사진"이라고 적힌 회색 상자나 이미지인 척하는 그라데이션이 아니어야 합니다. 사용자가 제어할 수 없는 외부 URL의 이미지를 로드하지 마세요.

7. 프로젝트나 브랜드가 이미 존재하는 경우

규칙이 반대입니다: 사용자가 리디자인을 요청하지 않는 한, 기존 색상, 폰트, 컴포넌트를 유지하세요. 먼저 감사를 실시하고 (프로젝트 구조, 기존 토큰, 다른 페이지의 패턴, 사용자是谁), 몇 줄로 요약을 작성한 후, 동일한 팀에서 만든 것처럼 느껴지는 새로운 결과물을 만드세요. 기존 아이덴티티 자체가 템플릿처럼 보인다면, 조용히 바꾸지 말고 참고 사항으로 전달하세요.

8. 제작 표준

• 모든 상태: 로딩, 빈 상태 (도움이 되는 문장과 다음 조치 포함), 오류 (재시도 포함), 성공; 모든 컨트롤에는 비활성화된 모양이 있습니다.
• 가짜 컨트롤 없음: 작동하는 것처럼 보이는 버튼, 필터, 탭, 폼은 실제로 작동해야 합니다. 아직 구현할 수 없는 것은 명확히 표시하거나 표시하지 말고, 인도 시 언급하세요.
• 시맨틱 HTML: nav, table, ul/ol, button, a와 href; 헤딩 순서가 합리적이어야 함; 이미지에는 대체 텍스트가 있어야 함.
• 접근성 및 반응형: 키보드 포커스가 보여야 함, Escape로 다이얼로그를 닫고 포커스를 되돌려야 함, 390px까지 반응형이어야 함, 넓은 콘텐츠는 자체 컨테이너에서 스크롤되어야 함, prefers-reduced-motion을 존중해야 함.
• 토큰이 모든 곳에서 사용되어야 함: 색상, 간격, 텍스트 크기, 반경, 그림자는 한 번 정의되어야 함.
• 테스트에 대해 정직해야 함: 실행되지 않은 검사를 주장하지 마세요.

9. 마케팅 페이지

패턴 자체가 문제가 아니라, 실행과 내용입니다. 번호 매기기, 통계 행, 사용 후기, "더 알아보기", 대문자 레이블은 분명히 좋은 사이트에서도 사용됩니다. 차이점은 세 가지입니다: 콘텐츠가 진짜이고 (실제 사진, 이름, 숫자), 실행이 완전히 강력하며 (대담한 스케일, 부드러운 움직임, 화면을 가득 채우는 사진), 페이지가 이야기를 들려줍니다. 이 세 가지 없이 패턴을 피하면 평범한 페이지가 생성되고, 이 세 가지와 함께 패턴을 사용하면 상을 받는 사이트가 탄생합니다.

모든 페이지는 다음을 가져야 합니다: 시작 부분에 박히는 하나의 시각적 순간 (고려된 구도의 큰 사진, 극도로 큰 타이포그래피, 대담한 색상 블록, 또는 주제 세계의 형태), 명확한 스케일 대비, 리듬 (넉넉함과 빽빽함, 밝음과 어두움의 교대), 페이지를 닫은 후 기억되는 한 가지. 하나의 색상 악센트를 소량만 사용하세요. 테스트: 사업주가 자랑스럽게 보여줄 것인가? 디자인 스튜디오에서 만든 것처럼 보이는가, 아니면 문서에서 내보낸 것처럼 보이는가? 의심스럽다면, 부족한 것은 일반적으로 규칙이 아니라 용기입니다.

구조. "제목, 부제목, 두 개의 버튼, 숫자 행이 있는 히어로; 세 개의 카드; 사용 후기; 전체 색상 CTA" 프레임워크는 템플릿입니다. 이야기로 구성하세요: 방문자가 느끼는 문제, 그에 대한 답변, 증거, 제안, 그리고 각 섹션은 다음 섹션으로 연결됩니다. 세 가지가 반드시 세 개의 동일한 카드일 필요는 없습니다. 번호 매기기는 구성 시스템으로 확고하게 실행될 때만 사용하며, 카드 위의 작은 숫자로 사용하지 마세요. 통계와 사용 후기는 실제 데이터로만 제공하며, 있는 경우 크고 완전하게 표시하세요 (이름, 확인 가능한 출처). 마무리는 종종 "시작할 준비가 되셨나요?" 블록보다 명확한 연락처가 더 유용합니다. 유형별: 랜딩 페이지는 하나의 메시지와 하나의 주요 행동을 가지고, 회사 소개는 프로젝트, 사람, 실제 주소를 통해 신뢰할 수 있음을 증명하며, 포트폴리오는 작업을 장식이 아닌 주인공으로 만듭니다.

취향 참조 (이 스킬의 작성자가 선택): fitosauna.com, aikah.robertoattanasio.com, bhavanakulkarni.com, mediaquestweb.com. 공통점: 화면을 가득 채우는 것으로 시작; 주요 요소로서의 타이포그래피; 모든 곳의 실제 사진 및 비디오; 부드럽고 고급스러운 움직임; 확인 가능한 증거 (날짜가 있는 리뷰, 비교 표, 보증); 개인적인 목소리; 반복되는 하나의 인간 손길 요소. 원하는 방향은 영화적이고, 이야기를 들려주며, 미디어가 풍부한 것입니다. 실제 사진이나 비디오 없이는 이 기준에 도달할 수 없으며, 이는 사용자에게 초반에 말해집니다.

움직임. 움직임이 없는 페이지는 인쇄물처럼 느껴집니다. 각각 이유가 있는 세 가지 유형을 사용하세요:

• 페이지가 열릴 때 하나의 시그니처 움직임, 주제가 작동하거나 움직이는 방식에서 파생되며, 1~2초 안에 완료됩니다.
• 모든 인터랙티브 요소에 150~250ms의 마이크로 전환.
• 순차적 콘텐츠를 위한 가벼운 등장: 812px 슬라이드, 300450ms, 항목 간 40~80ms 지연, 화면에 진입할 때 한 번; 전체 섹션에는 적용하지 마세요.

추가 어휘 (페이지당 23개, 각각 이유 포함): 자산 로드 중 짧은 오프닝 또는 카운터, 라인별로 드러나는 제목, 마키, 스크롤 시 수평으로 슬라이드되는 갤러리, 콘텐츠가 변경되는 동안 잠긴 섹션, 무음 배경 비디오. 움직임이 개념의 핵심인 경우 GSAP를 cdnjs에서 버전 고정하여 사용할 수 있습니다. 하나 또는 두 개의 효과는 CSS와 약간의 JS로 충분합니다. 정밀 포인터가 있는 와이드 스크린에서 부드러운 스크롤: wheel 캡처 (비수동; ctrlKey 및 수평 움직임 무시), deltaY를 대상에 추가, requestAnimationFrame에서 kini += (sasaran - kini) * 0.09로 이동; 터치, 키보드, 스크롤바는 원래대로 유지; 앵커 링크는 대상을 가리키고 포커스를 이동; reduced motion 또는 pointer: coarse인 경우 건너뜀. 진입 이징 cubic-bezier(.16,1,.3,1) 및 지속 시간 0.91.2초. 다음과 같은 것은 여전히 생성된 결과물로 읽힙니다: 모든 섹션에서 40px 페이드 업, 모든 사진에서 패럴랙스, 떠다니는 그라데이션 볼, 기능 없는 사용자 정의 커서, 자체 타이핑 텍스트, 모든 곳에서 호버 시 올라가는 카드. 오프너와 잠긴 섹션은 건너뛸 수 있어야 하며, 콘텐츠는 읽히기 위해 움직임에 의존해서는 안 됩니다. 스크롤 시 나타나는 콘텐츠는 스크립트가 클래스를 추가한 후에만 숨겨집니다 (예: .js .muncul) 그리고 reduced motion에서는 즉시 표시됩니다. JavaScript 없이도 모든 콘텐츠는 계속 표시됩니다.

10. 업무 도구

조용하고 절제된 것이 아니라, 조밀하고 의미 있어야 합니다. 대시보드 템플릿의 문제는 많은 위젯이나 색상이 아니라, 의미 없는 위젯과 색상입니다: 파스텔 그라데이션 카드, 각각 다른 색상의 숫자 카드, 로렘 입숨, 뉴모피즘.

색상은 데이터입니다. 많은 색상을 사용할 수 있지만, 각 색상은 모든 위젯과 화면에서 동일한 의미를 가져야 합니다: 순차적인 것 (단계, 우선순위)은 하나의 색상조에서 밝은 것에서 어두운 것으로 사용; 카테고리는 최대 6개의 분리된 팔레트 사용; 상태는 드문 색상 사용, 빨간색은 오늘 조치해야 하는 것만, 호박색은 임계값이 명시된 경고에 사용. 배경은 중성적이고, 브랜드 색상은 로고, 활성 메뉴, 기본 버튼, 주요 데이터 시리즈에만 사용. 색상은 결코 유일한 의미 전달자가 되어서는 안 됩니다.

모든 숫자는 "그래서 어쩌라고"에 답해야 합니다. 비교 대상 (목표, 오늘의 추세, 이전 기간)과 함께 표시하고, 의사 결정에 도움이 되지 않는 과시용 숫자는 제거하세요. 언어에 맞게 형식 지정: IDR 25억 8천만, IDR 3억 7200만, 1.284, 38%.

초기 레이아웃, 12열 그리드: KPI 행 (3~5개 카드); 측면 패널이 있는 넓은 차트; 측면 패널이 있는 넓은 작업 테이블; 활동 및 세부 정보. 가장 중요한 결정에 따라 순서를 변경하고, 첫 번째 행은 5초 안에 "오늘은 좋은가 나쁜가"에 답해야 합니다.

• KPI: 큰 숫자, 한 문장의 비교, 숫자 유형에 맞는 작은 시각 요소 (추세선이 있는 진행률, 누적 막대, 스파크라인, 비교를 위한 두 개의 막대). 전체 색상 카드, 모서리 아이콘 없음.

• 색상 사용: 연속적인 상태는 하나의 색상조로 표현하고, 범주형 데이터는 구별되는 팔레트를 사용합니다. 색상은 명암 대비나 패턴과 같은 다른 신호와 함께 사용되어 색맹 사용자도 정보를 이해할 수 있도록 합니다.

• 테이블: 정렬 가능한 열 (클릭 시 정렬 방향 전환), 검색 가능, 페이지 매김 또는 가상 스크롤. 중요한 행이나 특정 상태는 색상이나 아이콘으로 강조할 수 있지만, 과도하게 사용하지는 않습니다.

에러 상태는 도움이 되어야 합니다: "데이터를 불러오는 중 오류가 발생했습니다" 대신 "인터넷 연결을 확인하고 다시 시도하세요" 또는 구체적인 문제를 해결할 수 있는 방법을 제시합니다. 빈 상태는 다음에 무엇을 해야 하는지 명확하게 알려줍니다.

성능: 불필요한 데이터 요청을 피하고, 데이터가 로드되는 동안 스켈레톤 로딩을 사용합니다. 대시보드는 빠르게 반응해야 하며, 데이터 양이 많을 때는 가상 스크롤이나 페이징을 고려하세요.

작업 프로세스

1. 브리프 듣기: 사용자의 요청을 주의 깊게 듣고, 필요한 경우 위의 규칙에 따라 한 가지 명확한 질문을 하세요. 질문은 방향을 바꿀 수 있는 경우에만 합니다.
2. 계획 수립: 2항목 (주제), 3항목 (색상), 5항목 (타이포그래피), 페이지 유형 (1항목) 및 구조에 대한 결정을 포함한 계획을 제공하세요. 계획은 편집 가능하고 명확해야 합니다.
3. 실행: 위의 모든 표준을 충족하는 코드를 생성하세요. 마크업, 스타일, 스크립트 모두 포함됩니다.
4. 검토 및 전달: 생성된 코드가 모든 기준(접근성, 반응형, 의미론적 HTML, 상태 등)을 충족하는지 확인하세요. 완료되지 않은 사항이나 알려진 제한 사항을 전달 시 언급하세요.

스크립트

이 스킬은 scripts/ 디렉토리에서 다음 검사 스크립트를 제공합니다:

• check-static.mjs: 프로젝트 파일에 대해 정적 분석을 실행합니다.
• check-browser.mjs: 브라우저 환경에서 렌더링된 페이지를 검사합니다.

이러한 스크립트는 node scripts/check-static.mjs 또는 node scripts/check-browser.mjs와 같이 실행할 수 있습니다. 각 스크립트는 프로젝트의 디자인 및 접근성 표준 준수 여부에 대한 피드백을 제공합니다. 스크립트를 사용하기 전에 해당 스크립트의 문서를 참조하세요.