브랜드 행동

목적

Dot은 학습의 한 고리를 완결하고 다음 배움의 방향을 밝히는 동반자다. 브랜드는 로고, 색, 캐릭터를 추가하는 표면이 아니라 사용자가 복잡한 작업 안에서 맥락을 잃지 않고 다음 행동으로 나아가게 하는 제품의 태도다.

제품의 모든 판단은 다음 세 속성을 기준으로 한다.

• Flexible: 사용자마다 다른 문제와 화면·작업 맥락에 적응하되 목적과 안전 조건은 유지한다.
• Link: 사람, 데이터, 배움, 이전·현재·다음 맥락을 연결하고 화면 전환 뒤에도 관계를 보존한다.
• Glow: 불확실한 순간에 다음 방향을 은은하게 밝히되 업무를 지배하지 않는다.

제품 행동으로의 번역

세 속성은 서로 보완한다. Flexible만 강조하면 화면마다 규칙이 달라질 수 있고, Link만 강조하면 기존 구조를 고수할 수 있으며, Glow만 강조하면 장식적인 경험이 된다. 본질을 유지하며 적응하고, 맥락을 잇고, 필요한 순간만 안내한다.

Flexible

판단 기준

• 사용자의 역할, 숙련도, 권한, 작업 빈도가 다른가?
• 같은 데이터라도 비교, 작성, 검토 중 어느 작업인가?
• viewport와 입력 방식이 달라지는가?
• 기능을 제거하지 않고 단계적으로 공개할 수 있는가?
• 표현을 바꿔도 완료 기준과 안전 조건이 유지되는가?

적용법

• 운영 목록은 compact 또는 default 행으로 비교 속도를 높인다.
• 학습 콘텐츠와 긴 설명은 comfortable한 리듬을 사용한다.
• 전문가 설정은 없애지 않고 기본 → 맥락 → 고급 순서로 공개한다.
• 표는 좁은 화면에서 record list로 바꾸되 핵심 값과 행동을 보존한다.
• AI 입력은 이미 아는 사용자·과정 맥락을 재사용하고 필요한 질문만 추가한다.
• 권한에 따라 행동은 조정하되 상태와 제한 이유는 일관되게 설명한다.

본질로 유지할 것

• 화면의 목적과 주 행동
• 상태 이름과 완료 조건
• 데이터 손실, 외부 발송, 권한 영향 같은 안전 정보
• 최소 40×40px target, visible focus, non-color status
• 캐릭터의 지정 형태·색·관계·여백

Link

판단 기준

• 사용자가 이전 화면에서 만든 선택과 조건은 무엇인가?
• 현재 데이터가 어떤 사람·과정·학습 결과와 연결되는가?
• 저장, 검증, 발행 또는 생성, 검토, 적용의 어느 단계인가?
• 완료 후 이어질 다음 배움이나 운영 행동은 무엇인가?
• 돌아갔을 때 복구해야 하는 filter, scroll, 선택, 입력은 무엇인가?

적용법

• 목록 → 상세 → 편집 사이에 대상, 검색, 필터, 저장 상태를 보존한다.
• PageHeader에서 현재 대상과 상위 맥락, 다음 행동을 연결한다.
• WorkflowBar에서 저장 → 검증 → 발행의 단계를 같은 자리에서 이어준다.
• AI 결과에 입력, 생성 상태, 사람의 수정, 적용 결과를 연결한다.
• 학습 완료 후 다음 학습의 시점과 위치를 제공한다.
• 오류가 생기면 원래 행동과 복구 행동을 같은 frame 안에서 연결한다.

끊지 말아야 할 관계

• 사람과 그 사람에게 적용되는 데이터
• 원본과 수정·생성된 결과
• 상태와 그 상태를 만든 행동
• 오류와 영향을 받은 대상
• 완료된 학습과 다음 배움
• 현재 위치와 돌아갈 목적지

Glow

의미

Glow는 색 효과 자체가 아니다. 사용자가 불확실한 순간에 다음 방향을 찾도록 돕는 제한된 안내다. 안내가 필요하지 않은 정상 상태에서는 차분한 중립 표면이 더 브랜드답다.

적합한 순간

• 처음 시작할 때 핵심 가치와 첫 행동을 안내
• AI가 실제 작업 중일 때 처리 맥락을 보조
• 중요한 검토가 끝나고 다음 단계가 열릴 때
• 의미 있는 빈 상태에서 시작 방향을 제안
• 학습의 한 고리가 완료되고 다음 배움을 연결

부적합한 순간

• 기본 Primary 버튼과 일반 navigation
• 모든 카드, 표 행, 입력 focus
• 정상 지표와 반복 badge
• 일반 네트워크 로딩
• 위험, 삭제, 오류를 시각적으로 꾸미는 용도
• AI 기능이라는 사실을 과시하기 위한 상시 배경

Glow를 쓰기 전에 “이 강조가 사라지면 사용자가 다음 방향을 놓치는가?”를 묻는다. 아니라면 사용하지 않는다.

캐릭터의 역할

캐릭터는 정서적 연결과 브랜드 정체성을 위한 자산이며 장식이 아니다.

2D 표현

• 제품 안의 답변, 처리, 짧은 안내처럼 기능과 가까운 맥락에 사용한다.
• 작은 공간에서도 상태 문장과 행동을 방해하지 않아야 한다.
• 실제 package 사용은 catalog에 active로 승인된 자산으로 제한한다.
• 승인되지 않은 2D 변형을 임의로 그리거나 유사하게 만들지 않는다.

3D 표현

• 온보딩, 넓고 드문 빈 상태, 중요한 완료, 브랜드·홍보처럼 충분한 공간이 있는 맥락에 사용한다.
• DotCharacter는 catalog ID로 사용하고 최소 100px 크기 계약을 지킨다.
• 반복 목록, 작은 badge, 일반 오류, 조밀한 form에 사용하지 않는다.

Motion

• DotMotion variant="processing"은 실제 AI 생성·채점·분석 중에만 사용한다.
• avatar는 AI DOT의 실제 발화나 안내가 진행되는 동안에만 사용한다.
• 일반 로딩, 자동 갱신, 단순 hover 장식에는 사용하지 않는다.
• reduced motion, 실패, 로딩 중에는 의미를 유지하는 정적 fallback과 텍스트 상태를 제공한다.

형태 보존

• 지정된 형태, 색, 요소 사이의 관계, 방향, 여백을 바꾸지 않는다.
• 비율을 늘이거나 자르고, 일부 요소를 재조합하고, 임의의 색을 입히지 않는다.
• 텍스트나 badge를 캐릭터 위에 겹치지 않는다.
• 배경과의 대비를 위해 outline, shadow, glow를 임의로 추가하지 않는다.
• 필요한 형태나 상태가 catalog에 없으면 유사 자산을 만들지 않고 디자인 시스템 gap으로 기록한다.

정보 구조

• 페이지는 목적 → 상태 → 판단 정보 → 행동 → 세부 순서로 읽힌다.
• 브랜드 영역이 페이지 제목과 주 행동보다 먼저 읽히지 않는다.
• 연결된 정보는 proximity, alignment, consistent position으로 관계를 보여준다.
• 중요한 맥락을 캐릭터, 색, animation만으로 표현하지 않는다.
• Glow가 있는 영역은 한 화면에서 드물고 의미가 명확해야 한다.

피드백

• 성공은 작업이 실제로 완료된 범위까지만 말한다.
• 오류는 실패한 일, 영향, 복구 행동을 연결한다.
• 완료 피드백은 한 고리의 끝과 다음 방향을 함께 보여준다.
• 캐릭터는 사용자의 성취를 보조할 수 있지만 결과 텍스트를 대체하지 않는다.
• 부분 성공, 검토 필요, 불확실성을 친근한 표현으로 가리지 않는다.

AI 경험

• AI는 사용자의 목표와 맥락에 적응한다.
• 입력, 생성, 검토, 수정, 적용, 다음 배움을 연결한다.
• 결과가 불확실할 때 근거와 다음 확인 행동을 밝힌다.
• 캐릭터와 Glow는 실제 발화, 처리, 안내를 보조하며 AI 영역 전체를 장식하지 않는다.
• 사람이 책임 있게 검토해야 하는 지점을 없애지 않는다.

예외와 피해야 할 사용

• 브랜드 일관성을 이유로 모든 화면을 같은 밀도와 layout으로 고정하지 않는다.
• 사용자 맞춤을 이유로 상태 이름과 안전 조건을 바꾸지 않는다.
• 연결을 보여주기 위해 한 화면에 모든 이력과 관계를 동시에 노출하지 않는다.
• 다음 행동을 강조하려고 여러 요소에 Glow를 반복하지 않는다.
• 캐릭터를 오류 완화용 이모티콘처럼 사용하지 않는다.
• 승인되지 않은 자산, 색, 변형, asset ID를 추측하지 않는다.
• 캐릭터를 100px보다 작게 렌더하거나 임의로 crop하지 않는다.
• 브랜드 문구가 사용자의 실제 목적과 완료 상태보다 먼저 나오지 않게 한다.

상태와 접근성

• 브랜드 표현 없이도 목적, 상태, 행동을 모두 이해할 수 있어야 한다.
• 캐릭터가 장식적이면 빈 대체 텍스트를 사용하고, 의미가 있으면 인접 문장과 중복되지 않는 이름을 제공한다.
• gradient text는 핵심 정보와 긴 본문에 사용하지 않고 대비와 fallback을 검증한다.
• motion은 reduced-motion 환경에서 정적 상태로 전환한다.
• Glow와 상태색을 정보의 유일한 신호로 사용하지 않는다.
• keyboard focus ring과 selected 상태를 브랜드 효과가 가리지 않아야 한다.
• narrow layout에서도 캐릭터가 제목, 오류, 주 행동을 밀어내지 않는다.

검토 질문

• 이 화면은 사용자의 맥락에 적응하면서 목적과 안전 조건을 유지하는가?
• 사람, 데이터, 배움, 이전·다음 단계의 관계가 화면 전환 뒤에도 이어지는가?
• 사용자가 불확실한 순간에만 다음 방향을 안내하고 있는가?
• Glow가 사라지면 실제 안내 의미가 사라지는가?
• 캐릭터가 정서적 연결 또는 기능 맥락을 담당하는가, 빈 공간을 채우는가?
• 2D와 3D의 사용 맥락이 구분되는가?
• 캐릭터의 형태, 색, 관계, 여백, 최소 크기를 보존하는가?
• AI 표현이 생성·검토·적용 상태의 정직함을 가리지 않는가?
• 브랜드 표현 없이도 screen reader와 reduced-motion 환경에서 작업을 완료할 수 있는가?
• 한 학습 고리의 완료와 다음 배움의 방향이 함께 보이는가?