DanzzaN

UI 디자인

화면의 정보 배치·시각 표현·사용자 조작과 피드백을 결정할 때 참고할 판단과 원천을 모았다. 화면의 목적에서 출발해 역할별 표현과 문구를 정하고, 실제 내용과 상태에서 확인할 항목으로 이어진다. 특정 표현에 관심을 보인 이유는 아래 사례에서 읽을 수 있다.

시스템 구조·데이터 모델·API·배포 설계만 다루는 작업은 프로젝트의 해당 원천을 이용한다. 혼합 작업에서는 화면과 조작에 관한 부분에 이 Map을 적용한다. 컴포넌트의 의존성·상태 관리 구조와 화면에 드러나는 상태·피드백도 결정 대상으로 구분한다.

핵심 연결

지금 결정할 것읽을 판단
어떤 사례를 가져올 것인가디자인 레퍼런스는 화면의 목적과 함께 가져온다
색상·간격·글자·용어의 규칙을 어떻게 맞출 것인가UI의 일관성은 같은 역할에 같은 규칙을 적용하는 데서 나온다
행동·오류·빈 상태를 어떻게 설명할 것인가UI 문구는 사용자가 행동과 결과를 예측하게 한다
여러 면을 담은 자기소개의 첫 읽기량을 어떻게 조절할 것인가자기소개는 여러 단면을 한 번에 하나씩 보여줄 수 있다
모션을 넣거나 줄이는 이유는 무엇인가모션은 전달할 정보와 사용 빈도에 맞춰 조절한다
실제 내용과 상태에서 무엇을 확인할 것인가UI 완성도는 실제 내용과 상태 변화 속에서 확인한다
판단을 에이전트가 재사용할 문장으로 어떻게 남길 것인가에이전트 문서 작성

문서를 그대로 보여주는 화면

개인사이트에서는 원천 문서의 제목과 본문이 목록·검색·그래프와 실제 읽기에 쓰인다. 제목·도입·소제목·Map의 연결을 다듬을 때는 VAULT_RULES > 작성과 연결을 적용한다. 이 방향을 정한 맥락은 개인사이트 설계와 운영의 의사결정 - Codex 대화 > 원천 Markdown을 그대로 읽는 문서 작성에서 읽고, 같은 정본을 여러 인터페이스에서 이용하는 이유는 자기문서화와 공식 인터페이스로 이어진다.

문구 Atomic은 행동과 도착지를 예측하게 하는 기준을, 역할별 일관성 Atomic은 같은 역할에 같은 표현 규칙을 쓰는 기준을 제공한다. 이를 모든 글의 문체·목차를 통일하는 규칙으로 확대하지 않는다. 글자 크기·읽기 폭·여백·강조·중복 표시는 아래 타이포그래피·레이아웃 원문을 통해 화면에서 검토한다.

원문 방문 안내

원천방문할 상황
인터페이스 판단과 검토 기준 - Jakub Krehel레이아웃·타이포그래피·색상·문구·접근성·실제 상태 검토. Source의 해당 세부 문서로 이동한다.
디자인 엔지니어링과 모션 판단 - Emil Kowalski모션의 목적·빈도·속도, 조작 피드백, 선택 이유를 다루는 글·비교 데모가 필요할 때.
DESIGN.md 레퍼런스 활용 - VoltAgent화면 목적에 맞는 시각적 사례와 디자인 규칙을 비교할 때. 분석 대상과 미리보기를 확인한다.

선택 이유를 회수할 사례

  • 자기용 기록과 단편 자기소개 - cho.sh 대화: 기록·소개·도구의 서로 다른 목적과, 여러 단면이 있음을 알리며 한 단편씩 무작위로 보여주는 자기소개에 DanzzaN이 흥미를 느낀 이유. 관심의 근거와 구현 채택 범위는 Source에서 확인한다.

작업에서 사용하는 순서

프로젝트의 목적·사용자·기존 디자인 시스템을 먼저 확인하고, 현재 질문에 맞는 Atomic과 Source 본문을 읽는다. 새로운 UI 작업에서는 필요한 원문 부분까지 방문한다. 같은 작업에서 이미 확인한 본문과 판단은 재사용하며, 새로운 결정이나 원천 변경을 확인해야 할 때 관련 부분을 추가로 읽는다.

원문 접근에 실패하면 Source에 남은 마지막 확인일과 이번 조회 실패를 구분해 저장된 판단을 활용한다. 접근하지 못한 데모나 현재 원문을 보았다고 보고하지 않는다. 참고 자료의 변경은 사용자가 채택한 선택을 자동으로 바꾸는 근거가 아니다.

선호를 갱신하는 경로

실제 작업에서 선택·거절한 내용과 이유를 확인한다. 프로젝트의 구체적 선택은 그 프로젝트 문서에 두고, 개인 Vault 변경은 지식 승격은 사용자가 명시적으로 시작한다의 경계를 따른다.

사용자가 증류를 요청하면 대화·작업 원천과 기존 Atomic을 대조한다. 같은 주장에는 새 근거·조건·정정을 편입하고, 독립된 주장일 때 새 노트를 만든다. 저자의 조언과 에이전트의 해석을 사용자가 채택한 선호와 구분하며, 선호에는 실제 선택 이유와 적용 맥락의 원천을 연결한다. 일반 조회나 피드백만으로 확인일·선호를 자동 저장하지 않는다.

운영 근거와 연결

그래프 뷰

백링크