디자인 레퍼런스는 화면의 목적과 함께 가져온다
UI 레퍼런스를 사용할 때는 그 화면이 누구에게 어떤 일을 돕는지 함께 가져온다. 외형의 유사성보다 현재 화면과의 목적·사용 빈도·정보 밀도 차이를 확인하고 적용할 규칙을 선택한다.
소개 화면과 반복 업무 화면의 차이
제품 소개 화면은 관심과 이해를 유도하고, 반복 업무 화면은 탐색과 조작을 빠르게 돕는다. 큰 제목이나 넓은 여백이 어느 한 화면에서 적합하다는 사실만으로 다른 화면에서도 같은 선택을 정당화할 수 없다.
사례에서 가져올 규칙을 고르기
- 사례를 읽을 때 대상 화면과 주요 행동을 먼저 식별한다. 소개 페이지를 제품 내부 작업 화면의 명세로 취급하지 않는다.
- 같은 사이트 안에서도 소개·기록 탐색·도구 사용의 목적을 구분한다. cho.sh의 자기용 노트와 잘 차린 홈·미니앱처럼, 기록의 축적 목적과 읽기·조작 화면의 완성도는 함께 존재할 수 있다.
- 색상·글자·간격을 가져올 때 어떤 관계나 위계를 유지하려는지 설명한다. 값은 기존 프로젝트의 토큰·컴포넌트와 대조한다.
- 채택한 규칙·이유·사례 링크는 프로젝트 문서에 남긴다. 재사용할 개인 선호는 사용자가 증류를 요청할 때 별도로 검토한다.
관찰과 채택
개인사이트에서는 대기업을 선호해서가 아니라 구조와 글 구성을 보기 위해 기술 블로그를 분석했다. 작성자마다 다른 전개를 관찰하고 시각 요소도 함께 보되, 그 관찰을 DanzzaN의 문체·디자인 선호로 올리지 않았다. 사용자가 직접 고를 전개 선호, 에이전트가 재사용할 분석과 실제 사이트에 채택한 구조는 근거가 다르다.
좋은 사례라는 평가를 현재 프로젝트의 목적·원천·사용자 선택과 대조한다. 개인사이트 설계와 운영의 의사결정 - Codex 대화는 참고 분석을 먼저 저장하고 선호를 후속으로 연결한 사례다.
근거
- DESIGN.md 레퍼런스 활용 - VoltAgent: 사이트 분석의 범위와 Linear 소개 화면 사례.
- 디자인 엔지니어링과 모션 판단 - Emil Kowalski: 설명을 위한 마케팅 모션과 반복 입력의 서로 다른 목적·빈도.
- 자기용 기록과 단편 자기소개 - cho.sh 대화: DanzzaN이 구분한 자기용 기록·첫 화면·미니앱의 역할.
- 이 주장은 원천과 사례를 종합한 판단이며, 특정 브랜드 스타일을 따르라는 저자의 공통 규칙은 아니다.