문서

motif 쓰는 법과
만든 방식이에요

어떻게 쓰는지, 그리고 Deus·Figma·Framer에서 무엇을 가져왔고 무엇은 못 했는지 적어 뒀어요.

처음 쓸 때

  1. 스튜디오를 열어요가운데가 캔버스, 왼쪽이 레이어, 오른쪽이 추가·디자인·브랜드 패널이에요. 휴대폰에서는 아래 막대로 열어요.
  2. 브랜드 탭에서 키트를 정해요이름과 말투, 색 세 가지, 서체, 모서리, 모티프 순서로 내려가면 돼요. 바꾼 값은 모든 프레임에 같이 반영돼요.
  3. 프레임 안의 요소를 직접 고쳐요요소를 누르면 골라지고, 끌면 옮겨지고, 핸들로 크기·회전이 바뀌어요. Shift+클릭이나 빈 곳을 끄는 상자로 여러 개를 고르고, ⌘G 로 묶어요. 오른쪽 ‘추가 → 커스텀’ 에서 도형과 앱 부품(버튼·리스트·탭바 등)을 넣고, 오른쪽 ‘디자인’ 탭에서 채우기·그라디언트·혼합 모드·효과를 정해요.
  4. ▶ 미리보기로 눌러 봐요버튼에 ‘화면 이동 · 팝업 · 뒤로 · 보이기/숨기기’ 동작을 붙이면 ⌘Enter 로 앱처럼 눌러 볼 수 있어요. ‘추가 → 퀵스타트 → 앱 스타터’ 는 이미 이어진 화면 7개를 한 번에 놓아 줘요.
  5. 기본 부품을 내 것으로 고쳐요부품을 넣고 속성 칸(모양·앞뒤 요소·여백)을 바꾸거나, 채우기·선·모서리를 덮어써요. 안쪽까지 고치고 싶으면 ‘커스터마이즈’ 로 내 컴포넌트로 만든 뒤 자유롭게 편집해요.
  6. 자주 쓰는 모양은 컴포넌트로 만들어요요소를 고르고 ⌥⌘K 를 누르면 마스터가 돼요. 오른쪽 ‘추가 → 커스텀 → 내 컴포넌트’ 에서 인스턴스를 여러 화면에 넣고, 마스터를 한 번 고치면 모두 바뀌어요. 인스턴스에서 직접 고친 글·색·크기는 그대로 남아요.
  7. 내보내기 탭에서 가져가요토큰은 CSS·Tailwind·JSON, 에셋은 SVG, 선택한 요소는 HTML·CSS로 가져가요. 가이드북은 한 페이지로 모아 보여줘요.

단축키

  • 선택 도구V
  • 손 도구H
  • 프레임 그리기F
  • 글자 넣기T
  • 사각형 그리기R
  • 원 그리기O
  • 다각형 그리기Y
  • 별 그리기S
  • 선 그리기 (⇧ 누르면 15° 단위)L
  • 화살표 그리기⇧L
  • 펜 (클릭 = 점, 끌기 = 곡선, 처음 점 클릭 = 닫기, Enter = 끝)P
  • 누르는 동안 캔버스 이동Space
  • 커서 기준 확대·축소⌘/Ctrl휠
  • 전체 보기0
  • 100%로 보기1
  • 선택한 요소로 맞추기2
  • 확대·축소 한 단계+-
  • 가장 안쪽 요소 바로 고르기⌘/Ctrl클릭
  • 선택에 넣기 · 빼기⇧클릭
  • 상자로 여러 개 고르기빈 곳 끌기
  • 같은 층 모두 선택⌘/CtrlA
  • 그룹 만들기 (⇧ 를 더하면 풀기)⌘/CtrlG
  • 벡터로 합치기(평탄화)⌘/CtrlE
  • 컴포넌트 만들기 (⌥ ⌘/Ctrl B = 인스턴스 분리)⌥⌘/CtrlK
  • 프로토타입 미리보기⌘/CtrlEnter
  • 왼쪽·위·오른쪽·아래·가로 가운데·세로 가운데 정렬AltA W D S H V
  • 가운데를 기준으로 크기 조절 (⇧ 는 비율 고정)Alt리사이즈
  • 벡터는 점 편집, 점 = 곡선↔직선, 선 = 점 추가더블클릭
  • 글자 고치기 · 안쪽 요소로Enter
  • 바깥 요소로⇧Enter
  • 오토 레이아웃으로 감싸기⇧A
  • 1px 이동 (⇧ 누르면 10px)방향키
  • 되돌리기⌘/CtrlZ
  • 다시 하기⇧⌘/CtrlZ
  • 요소 복사 (⌘/Ctrl X 잘라내기, ⌘/Ctrl V 붙여넣기)⌘/CtrlC
  • 요소 복제⌘/CtrlD
  • 앞으로·뒤로 한 칸][
  • 숨기기⇧⌘/CtrlH
  • 잠그기⇧⌘/CtrlL
  • 요소 지우기Delete
  • 도구 풀기 · 선택 해제Esc

글자를 입력하는 중에는 단축키가 동작하지 않아요. 터치 화면에서는 두 손가락으로 확대해요.

어디서 가져왔나요

  • Deus · 결과가 곧 웹 구조

    프레임 안의 모든 요소가 진짜 HTML이에요. 내보내기 탭에서 선택한 요소의 HTML과 CSS를 그대로 복사하고, 토큰 이름도 내보낸 CSS와 같아요.

  • Deus · 바뀐 값만 다시 그리기

    요소마다 자기 데이터만 구독해서, 한 요소를 고쳐도 그 요소만 다시 그려요. Deus는 MobX를 쓰고, motif는 같은 목적을 셀렉터 구독으로 만들었어요.

  • Deus · 셸과 캔버스 분리 (따라 하지 않았어요)

    Deus는 셸과 캔버스를 서로 다른 최상위 도메인의 iframe으로 나눠 성능을 격리해요. motif는 한 페이지 안에서 돌아서 이 부분은 넣지 않았어요.

  • Figma · 선택과 핸들

    프레임 바로 아래 요소가 먼저 골라지고 더블클릭으로 안쪽에 들어가요. 핸들로 크기를 바꾸고, 끌면 다른 요소의 선에 붙어요.

  • Figma · 오토 레이아웃

    가로·세로로 줄 세우고 간격·여백·정렬을 정해요. 크기는 고정·채우기·맞춤 중에서 고르고, 끌어서 순서를 바꾸거나 다른 프레임으로 옮겨요.

  • Figma · 변수와 모드

    색 램프가 변수, 라이트·다크·브랜드가 모드예요. 요소의 색은 토큰으로만 고르고, 모드는 색의 역할만 바꿔 끼워요.

  • Figma · 레이어와 인스펙터

    왼쪽 레이어 트리에서 요소를 끌어 순서·부모를 바꾸고, 이름을 고치고, 숨기거나 잠가요. 오른쪽 패널에서 속성을 만져요.

  • Framer · 여러 크기로 놓아 보기

    프레임 크기 바로가기로 데스크톱 1280, 태블릿 768, 휴대폰 390 프레임을 나란히 놓고 같은 요소를 다듬어요.

  • Framer · 만들고 바로 공개

    가이드북은 지금 키트를 읽어 한 페이지로 보여줘요. 호스팅은 하지 않고 이 브라우저에서만 열려요.

아직 못 한 것

  • Deus의 선택·인스펙터·오토 레이아웃 조작 방식은 공개된 자료가 없어요. 그래서 요소 편집은 Figma·Framer의 방식을 따랐고, Deus에서는 구조(웹 구조 기반)와 반응성 아이디어만 가져왔어요.
  • 여러 개를 고르면 함께 옮기고 정렬·그룹·불리언이 되고, 같은 프레임 안에 자유롭게 놓인 요소는 묶음 상자로 한꺼번에 키우고 돌릴 수 있어요. 오토 레이아웃 안의 요소나 부모가 다른 요소가 섞이면 막혀요. 기울어진 요소를 비균등하게 키우면 모양이 근사값이에요. 그룹은 자유 배치 안에서만 만들어져요.
  • 다각형·별·벡터·선은 윤곽 안을 눌러야 골라지지만, 합치기(불리언)도 합친 모양 안쪽을 눌러야 골라져요. 불리언에는 테두리가 안 입혀지고, 합쳐서 벡터로 만든(⌘E) 뒤에 입혀요.
  • 내 컴포넌트는 마스터 하나를 복제해 맞추는 방식이에요. 마스터에서 자식을 앞에 끼우거나 순서를 바꾸면 인스턴스에서 고친 값이 어긋날 수 있고, 변형(variants) 묶음과 인스턴스 교체는 아직 없어요. 앱 부품(버튼·입력창 …)은 속성 편집과 분리 두 방식이에요.
  • 미리보기는 이 브라우저 안에서 도는 프로토타입이에요(공유 링크 없음). 사진은 데이터 주소로 저장돼서 브라우저 저장 용량(보통 5MB 안팎)을 나눠 써요.
  • 프로젝트는 이 브라우저에만 저장돼요. 공유와 함께 편집은 없어요.

알아두세요

  • 작업은 이 브라우저(localStorage)에만 저장돼요. 브라우저 데이터를 지우면 사라지니 토큰과 SVG는 내보내 두세요.
  • 가이드북은 서버에 올라가지 않고, 이 브라우저에 저장된 키트를 읽어 보여줘요.
  • 서체는 Pretendard, Clash Display, Heal The Web A와 시스템 서체 중에서 골라요.
  • 색 램프는 OKLCH로 만들고, 넣은 색이 가장 가까운 밝기 단계에 그대로 들어가요.

참고한 글