같은 컴포넌트도 색과 글꼴, 모서리 모양에 따라 전혀 다른 인상을 줍니다. 기능은 같아도 어떤 브랜드의 제품인지 느껴지는 순간은 이런 작은 차이에서 시작됩니다.
Compass에 브랜드의 시각적 언어를 설정하는 Brand 기능을 추가했습니다. 심볼과 워드마크부터 색상, 타이포그래피, 아이콘, 모서리 형태까지 브랜드의 인상을 만드는 요소를 한곳에서 조정할 수 있습니다.
먼저 브랜드의 얼굴을 담습니다. 심볼을 업로드하고 워드마크를 입력한 뒤, 강조색과 톤을 조정해 브랜드의 분위기를 구체화합니다. 큰 제목에 사용하는 디스플레이 글꼴과 본문 글꼴을 나누어 선택하고, 아이콘 세트와 굵기, 모서리의 둥근 정도와 형태까지 설정할 수 있습니다.
설정한 비주얼 랭기지는 여러 UI 예시와 함께 살펴볼 수 있습니다. 프로젝트 생성 폼, 알림 설정, 팀원 목록, 활동 차트, 체크리스트 등을 통해 브랜드 요소가 실제 화면에서 어떻게 어우러지는지 확인해 보세요.
여기서 지정한 브랜드 설정은 MCP로 연결해 앞으로 만드는 전체 UI에 반영할 수 있습니다. AI와 화면을 만들 때마다 색상이나 글꼴을 반복해서 설명할 필요 없이, 정해 둔 브랜드의 시각적 언어를 바탕으로 작업을 이어갈 수 있습니다. 새로운 화면을 추가할 때도 같은 기준을 적용해 제품 전반의 일관성을 유지할 수 있습니다.
브랜드 방향을 잡고 있거나, 기존 브랜드를 디지털 제품으로 확장하고 있다면 Compass Brand에서 시작해 보세요. 브랜드의 개성을 설정하고, 앞으로 만들어 갈 화면까지 하나의 시각적 언어로 연결할 수 있습니다.
