브랜드의 반복되는 한 조각을 정하면
나머지는 따라와요
색, 글꼴, 모티프를 한 번 정하면 명함부터 웹 첫 화면까지 같이 바뀌는 브랜드 아이덴티티 디자인 툴이에요.
전부 같은 브랜드 키트 하나로 그려졌고, 스튜디오에서 글자와 도형을 하나씩 고칠 수 있는 진짜 HTML이에요.
이런 걸 할 수 있어요
- 색 램프색 하나를 넣으면 10단계 램프가 만들어져요
- 서체 스케일제목·본문 글꼴과 비율로 크기가 정해져요
- 모티프도형 네 칸으로 로고와 패턴을 같이 만들어요
- 라이트·다크·브랜드모드마다 색의 역할만 바꿔 끼워요
- 요소 단위 편집글자·도형·로고를 눌러 끌고 크기를 바꾸면, 결과는 진짜 HTML이에요
- 가이드북만든 키트를 한 페이지로 모아 보여줘요
이렇게 써요
- 템플릿이나 빈 키트로 시작해요이름, 한 줄 소개, 말투와 키워드부터 적어요.
- 토큰을 정해요색 세 가지, 글꼴, 모서리 둥글기, 모티프 도형을 골라요.
- 프레임에서 직접 다듬어요명함·앱 아이콘·SNS·웹 히어로·포스터 프레임 안의 요소를 하나씩 눌러 고쳐요. 토큰은 바로 반영돼요.
- 내보내요CSS·Tailwind·JSON 토큰과 SVG, 가이드북으로 넘겨요.
이런 도구에서 배웠어요
Deus
발표에 따르면 화면을 그림이 아니라 웹 컴포넌트로 다뤄서, 편집한 결과가 곧 실제 웹 구조예요. 상태는 바뀐 값만 다시 그려요.
프레임 안의 요소가 진짜 HTML이고, 선택하면 코드를 그대로 볼 수 있어요. 요소 하나를 고치면 그 요소만 다시 그려요.
Figma
요소를 눌러 고르고, 핸들로 크기를 바꾸고, 오토 레이아웃으로 줄 세워요. 변수와 모드로 같은 구조에 다른 값을 끼워요.
선택·끌기·크기 조절·오토 레이아웃·레이어 트리를 넣고, 라이트·다크·브랜드 모드가 색의 역할만 바꿔요.
Framer
만드는 화면을 직접 만지면서 여러 크기로 나란히 놓아 보고, 만든 자리에서 바로 공개해요.
프레임 크기 바로가기로 데스크톱·태블릿·휴대폰을 나란히 놓고, 가이드북으로 정리해요.
참고한 글과 자세한 대응은 사용법에 적어 뒀어요.