The Brand Studio

#/start의 Brand Studio는 브랜드를 다듬는 유일한 곳입니다 - 로고, 색상, 타입, 나머지 토큰과 보관하는 파일까지. 여기서 한 번 설정하면 모든 도구, 페이지, 내보내기는 검토가 아니라 구조적으로 그것을 따릅니다.

변경 사항은 적용하는 즉시 앱 전체에 걸쳐 실시간으로 미리보기되므로, 확정하기 전에 색상이나 폰트가 어디에나 반영되는 모습을 볼 수 있습니다. 모든 처리는 온디바이스입니다: 브랜드 파일과 토큰은 기기를 벗어나지 않으며(구글 폰트를 선택하면 동의 대화상자 이후 한 번 해당 패밀리를 구글에서 가져옵니다), 브랜드는 하나의 브랜드 팩 파일로 이동합니다.

이곳은 편집기입니다. 대시보드는 거울일 뿐입니다. 대시보드(#/d)의 Design system 탭은 브랜드를 읽기 전용으로 보여줄 뿐이며, 편집은 여기 #/start에서 합니다. 나중에 색상을 바꾸고 싶다면 Brand Studio로 돌아오세요.

The rooms

스튜디오는 옆쪽 레일에 나열된 룸들로 구성됩니다 - 단계가 아닙니다. 번호도 없고, 서로에게 의존하지도 않으며, 어느 곳에 먼저 도착해도 정당합니다:

• Overview - 허브입니다. 지금 존재하는 것을 한눈에 보여주며, 각 룸으로 들어가는 문이 있습니다.
• Colours - 색상을 하나씩 추가하고, 역할을 지정하거나 하나로부터 전체 팔레트를 생성합니다.
• Type - 앱, 도구, 모든 내보내기가 참조하는 네 가지 서체.
• Logos - 사용자의 마크를 모든 방향과 처리 방식으로.
• Tokens - 모서리 반경, 간격, 그림자 등 시스템의 나머지.
• Files - 브랜드가 보관하는 이미지, 오디오, 모션 파일.

휴대폰에서는 같은 목록이 헤더 아래 고정된 가로 칩 스트립이 됩니다. 룸을 전환해도 아무것도 다시 로드되지 않습니다 - 편집기는 모든 패널을 마운트된 상태로 유지하며 요청한 것만 보여줍니다.

룸 딥링크는 #/start?area=<key>로 만듭니다. 키는 overview, color(URL에는 미국식 철자를 씁니다), type, logos, tokens, catalogue(Files 룸 - 패널 키는 영구 계약이므로 URL은 예전 이름을 유지합니다), versions입니다. ?tab=은 오래전부터 쓰인 별칭으로 여전히 동작하므로 예전 링크와 북마크도 계속 작동하며, 인식되지 않는 값은 죽는 대신 Overview를 엽니다.

레일 하단에는 하나의 룸이 아니라 디자인 시스템 전체에 속하는 동작들이 고정되어 있습니다:

• Add from… - 소스 선택기로, 파일, PDF, 이미지, 폰트, 웹사이트로부터 브랜드를 가져올 때 사용합니다. 아래 Bring a brand in을 참조하세요.
• Tray - 스캔이 찾아냈지만 아직 확정하지 않은 후보들입니다. 스캔이 실제로 무언가를 유지할 때까지 숨어 있으며, 그럴 때 개수가 표시됩니다. 해당 행에서 Add를 누르기 전까지는 브랜드에 아무 영향도 없습니다.
• Export - 브랜드 전체를 하나의 LollyBrand-…zip으로 작성합니다.
• Tokens (.json) - 순수한 디자인 토큰 문서만 따로, 저장소나 빌드 단계, 다른 토큰 도구용으로 씁니다.
• Versions - 디자인 시스템의 이름 붙인 사본을 게시, 활성화, 복원합니다. 게시할 자신의 것이 생기기 전까지는(또는 ?area=versions 링크가 직접 요청하기 전까지는) 숨겨져 있습니다.

signed by Lollyvector SVG2026-08-24직접 확인하기Get the signed file20 paths~1.1k nodes37 groups19 KBsigned by Lollyvector SVG2026-08-24직접 확인하기Get the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overview는 처음 도착하는 룸이며, 두 가지 얼굴을 갖고 있습니다.

아직 아무것도 설정하지 않았다면 두 개의 문을 제공합니다 - Start from a file(디자인 토큰, Penpot 프로젝트, 디자인 시스템 팩 또는 SVG)과 Start from scratch(색상 하나를 추가하고 원할 때 계속 진행) - 그리고 그 아래 조용한 Explore the tools 출구도 있습니다. 나가는 것 역시 정당한 답이니까요.

디자인 시스템이 이미 존재하면 같은 룸이 가지고 있는 것을 보여줍니다: 팔레트와 그 색상 개수, 적용 중인 서체 패밀리, 채워진 로고 슬롯 수, 토큰 개수, Files 룸. 모든 블록은 해당 룸으로 들어가는 문입니다. 여기에는 개수만 있을 뿐, 진행률 표시줄도 완료 카드도 없습니다 - 이 스튜디오에서는 아무것도 빚지지 않습니다.

Logos

먼저 상단의 드롭 영역에 마크 폴더를 통째로 비워 넣으세요: "Drop marks here, or choose several at once"는 가지고 있는 파일 수만큼 한 번에 받습니다. 각 파일은 형태와 잉크를 기준으로 분석된 뒤 Waiting for a slot 아래에 그 결과를 말해주는 칩으로 대기합니다 - "Looks like the Horizontal primary"처럼 근거가 된 측정값과 함께, 그리고 Place 버튼(해당 슬롯이 이미 채워져 있으면 Replace)이 붙습니다. 확신이 없을 때는 칩이 그 사실을 분명히 밝히고 대신 여덟 개를 모두 나열하는 Change slot을 제공합니다. 무언가를 누르기 전까지는 아무것도 배치되지 않습니다.

이 대기열 주변에서 두 가지 일이 일어납니다. 여백이 남는 마크는 먼저 트림 제안을 받습니다 - 응답하거나 Escape를 누르면 원본 파일이 그대로 들어갑니다. 그리고 어떤 마크가 비어 있는 형제 슬롯을 채울 수 있는 경우, 룸은 파생된 mono 또는 reverse 버전을 Generated로 표시된 별도 칩으로 제안하며, 다른 방식으로 그 슬롯을 채우면 다시 사라집니다.

그 아래에는 모든 마크가 결국 들어가는 그리드가 있습니다 - 방향 × 처리 슬롯입니다:

• Orientations: Horizontal(워드마크 + 심볼을 한 줄로)과 Vertical(세로로 쌓아 정사각형과 세로 공간에 적합).
• Treatments: Primary, Primary reverse(어두운 배경용), Mono(단색), Mono reverse.

이렇게 여덟 개의 선택적 슬롯이 있습니다. 슬롯을 클릭해 PNG, SVG, JPEG 또는 WebP를 추가하고, 채워진 슬롯을 클릭하면 교체합니다. 모든 슬롯은 선택 사항이며 모든 것이 이 기기에 남습니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file8 paths~4.8k nodes19 groups54 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file8 paths~4.8k nodes19 groups54 KB

• Custom marks - 브랜드가 자체적으로 이름 붙인 마크(아이콘, 문장, 파비콘 등)는 Custom marks 아래에 추가합니다. 이름을 정하고 파일을 선택하세요.
• More identities - 서브 브랜드, 제품이나 이벤트는 자체 로고 세트를 온전히 가질 수 있습니다. + Add another logo로 추가하고 이름을 붙이세요. 기본 세트는 단순히 "Your logo"입니다.
• Upload an SVG and Lolly reads its colours. 새 설치본에서는 로고에서 기본 색상을 조용히 지정하고 그 사실을 알립니다. 기존 브랜드에서는 대신 색상을 제안으로 제시합니다 - "Found in the logo: #…"와 그 옆의 Use as primary 버튼으로 - Colours 룸에서 받아들이거나 무시할 수 있습니다.

Colours

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file114 paths~26k nodes149 groups4 images523 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file114 paths~26k nodes149 groups4 images523 KB

가장 풍부한 룸으로, 두 개의 창으로 나뉩니다. 왼쪽은 작업 공간이고 오른쪽은 실시간 팔레트입니다. 둘 사이의 구분선을 드래그해 크기를 조절할 수 있습니다(그 위에서 Enter를 누르면 팔레트를 접어 치워둡니다).

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file61 paths~9.4k nodes77 groups200 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file61 paths~9.4k nodes77 groups200 KB

Add a colour, then give it a job

Add a colour는 단순 경로의 전부입니다: 어떤 표기법으로든 색상을 붙여넣거나 선택하면 정확히 하나의 토큰이 됩니다. 그로부터 무언가가 유도되지도, 무언가가 제안되지도, 그 이상 아무것도 요구되지 않습니다. 색상 목록 전체를 붙여넣으면 각각이 개별적으로 추가할 수 있는 칩이 됩니다.

Roles는 그 위에 놓이는 레이어입니다 - 어떤 색상이 어떤 역할을 맡는지. 역할은 선택 사항입니다(느슨한 세 가지 색상만 있고 역할이 없는 디자인 시스템도 완전히 유효합니다). 어떤 스와치든 역할을 맡을 수 있으며 대비 값은 표면을 기준으로 측정되며 APCA가 우선입니다.

The expert wings

이 두 요소 아래에는 접혀 있는 네 개의 섹션이 있습니다. 원하는 것을 여세요. 각각은 #/start?area=color&focus=<wing>으로 딥링크할 수 있습니다:

• Generate a starter palette(focus=generate) - 색상 하나에서 전체 음영 세트로. 아래에서 설명합니다.
• Shade curves(focus=curves) - 램프를 지점별로 다시 형성합니다. 명도, 채도, 색상 각각 자체 곡선을 가지며 L / C / H로 전환하고, 드래그하는 동안 아래의 음영들이 실시간으로 다시 구워집니다.
• Contrast(focus=contrast) - Contrast-lock은 선택한 배경에 대해 APCA 목표치를 맞추도록 램프의 색조를 다시 조정하되 각 단계는 자신의 색상과 채도를 유지합니다. Rotate hue는 램프 전체를 색상환 위에서 통째로 회전시키며 각 음영은 명도와 채도를 유지합니다.
• Print(focus=print) - 인쇄에서 기본 색상이 어떻게 되는지: 자동 화면 값이거나, 고정된 CMYK 빌드, 또는 명명된 별색 잉크.

One colour, a whole palette

Generate a starter palette 안에서 Primary colour를 선택하면 Lolly가 엔진이 어디서나 사용하는 동일한 지각적 색상 수학(OKLCH)을 이용해 완전한 팔레트를 산출합니다 - 밝고 어두운 표면, 텍스트, 강조색과 전체 색조/음영 램프까지. 유도 방식을 조정하세요:

• Scheme - Mono, Complement, Analogous 또는 Triad - 보조 색상이 기본 색상과 어떤 관계를 갖는지 설정합니다.
• Shades - 3에서 20 사이의 슬라이더(기본값 5)로 각 램프가 생성하는 단계 수를 조절합니다.
• Fine-tune(접힘) - UI intensity(Muted / Deep), Contrast(Comfort / High), Text on brand(Auto / Light / Dark).

이 윙에서는 아무것도 브랜드에 기록되지 않습니다. Replace palette(아래)를 누르기 전까지는 앱 전체에서 실시간으로 확인할 수 있는 미리보기일 뿐입니다.

기본 색상 아래에서 실시간 Primary / Neutral / Secondary / Blend 램프와 각각 자체 대비 값(WCAG 비율과 그 옆의 APCA Lc 수치)을 담은 Light와 Dark 표본 카드를 볼 수 있습니다. Neutral 또는 Secondary 램프의 한 단계를 클릭하면 유도된 기본값 대신 해당 음영을 고정합니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file25 paths~4.6k nodes60 groups57 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file25 paths~4.6k nodes60 groups57 KB

팔레트 만들기 (하모니 생성기)

같은 구역에서, 팔레트 만들기는 기본 색상에서 어울리는 강조 색상을 생성합니다. 하모니를 선택하세요 - 보색, 인접색, 삼색조, 사색조 또는 유사색(각각 2~5개의 강조색 수와 10°에서 45°까지의 색상 각도를 갖습니다) - 각 후보는 자동 생성된 읽기 쉬운 이름과 + 추가 버튼과 함께 제공됩니다. 하나를 추가하면 그 색상이 즉시 팔레트에 들어갑니다, 한 번의 누름이 하나의 토큰이 됩니다. "적용된 내 팔레트"는 전체 세트를 실제 그래픽에 미리 보여줍니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file8 paths936 nodes14 groups15 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file8 paths936 nodes14 groups15 KB

생성된 팔레트 적용하기

팔레트 교체는 이 구역에서 실제로 무언가를 기록하는 유일한 컨트롤이며, 절대 곧바로 기록하지 않습니다. 누르면 먼저 "팔레트를 교체할까요?"라는 제목의 검토 카드가 열리며, 앞으로 일어날 일을 정확히 항목별로 나열합니다: 직접 지정한 역할이 몇 개나 그대로 유지되는지, 직접 추가한 색상이 몇 개나 유지되는지, 셰이드 곡선이 몇 개나 다시 기준점을 잡는지, 인쇄 잠금이 몇 개나 다시 고정되는지, 숨겨진 셰이드가 몇 개나 계속 숨겨져 있는지, 그라디언트 스톱이 몇 개나 색상을 유지하는지.

그 카드에서 팔레트 교체를 누르면 적용되고, 취소를 누르면 아무것도 바꾸지 않고 빠져나갑니다. 실행되고 나면 카드는 "팔레트가 교체됨."으로 바뀌며 실행 취소에 이미 포커스가 맞춰져 있습니다 - 그리고 교체 전에 전체 디자인 시스템의 체크포인트가 저장되므로, "원래대로 되돌리기"는 잃어버린 오후가 아니라 복원 한 번으로 끝납니다.

팔레트, 차트, 그리고 각 견본

오른쪽 패널에는 브랜드가 가진 모든 색상이 그룹별(기본, 중립, 보조, 스펙트럼, 사용자 지정, 역할)로 나열되며, 각 그룹은 자체 + 추가 버튼과 함께 접고 펼 수 있습니다. 그 아래 색상 차트는 같은 견본들을 두 가지 보기로 펼쳐 보여줍니다: 휠(OKLCH 휠 - 점을 드래그해 색을 바꾸거나, 점을 클릭해 편집하거나, 빈 공간을 클릭해 새 견본을 추가할 수 있습니다)과 표시 가능한 범위가 실제로 어디서 끝나는지 보여주는 색역 차트입니다. #/start?area=color&focus=chart는 이 카드를 바로 열며, ?wheel도 늘 그래왔습니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file155 paths~14k nodes199 groups1 image191 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file155 paths~14k nodes199 groups1 image191 KB

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file274 paths~3.7k nodes67 groups83 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file274 paths~3.7k nodes67 groups83 KB

견본을 클릭하면 편집기가 열립니다:

• 이름 바꾸기.
• 색상 설정 - 지각적 OKLCH 슬라이더로 피커가 열리며, Hex, HSL, RGB, CMYK 모드를 제공합니다. 값 필드는 활성화된 색공간으로 읽고 또한 쓰므로, 헥스 값을 붙여넣거나 잉크 백분율을 입력할 수 있습니다. CMYK를 입력하면 변환을 통해 화면 색상이 설정된다는 점에 유의하세요 - 정확한 잉크 값을 고정하려면 아래의 인쇄 잠금을 사용하세요.
• 저장 방식 - 견본이 저장되는 방식을 선택합니다: LCH(기본값 - 지각적이고 넓은 색역을 가지며 편집에 가장 적합), Hex, RGB 또는 HSL. 정확한 레거시 헥스 값을 고정하거나 sRGB 값을 맞춰야 할 때 재정의하세요.
• 다음으로 사용 - 역할 패널로 돌아가지 않고 이 견본을 브랜드 역할 중 하나에 직접 지정합니다. (역할 자체의 타일에는 이 옵션이 없습니다 - 역할은 역할을 가질 수 없습니다.)
• 인쇄 대체 값(접힘) - 색상의 인쇄 동작을 잠급니다:
• CMYK - 자동에서 잠금으로 전환해 자동 sRGB→CMYK 변환을 정확한 잉크 값(C/M/Y/K, 0–100)으로 재정의합니다.
• 별색 - 없음에서 설정으로 전환해 견본을 별색에 고정합니다. 이름(예: PANTONE 186 C), 선택적인 북, 잉크가 전혀 잉크가 아닌 경우를 위한 선택적 마감(기본값은 일반 잉크) - 박, 양각 또는 음각, 스팟 니스, 소프트 터치, 또는 다이컷, 접지선, 천공을 지정할 수 있습니다.
• 다른 색공간에서(접힘) - 같은 개념을 확장한 것으로, 각 행은 이 견본을 표현할 수 있는 색공간이며, 표준 값에서 파생되거나 직접 지정할 수 있고, 직접 지정한 값이 내보내기 시 우선합니다.

이 인쇄 잠금은 CMYK PDF나 TIFF를 내보낼 때 인쇄소가 사용하는 값입니다 - 내보내기를 참고하세요.

견본 삭제는 안전합니다: 파생된 램프 단계와 테마 역할은 숨겨질 뿐이며(기저 토큰이 계속 해석되므로 하위에서 아무것도 깨지지 않습니다), 직접 추가한 색상은 완전히 제거됩니다.

그라디언트

선택적인 그라디언트 패널은 팔레트에서 배경과 강조색용 블렌드 토큰을 만듭니다. 브랜드에 그라디언트가 필요 없다면 완전히 건너뛰어도 됩니다. 각 그라디언트에는 미리보기, 이름이 붙은 스톱(2–8개), 각도가 있습니다. 핵심 동작: 스톱은 견본을 참조하므로, 그 견본의 색을 바꾸면 그라디언트도 따라 바뀝니다. 보간은 깔끔한 블렌딩을 위해 OKLCH에서 이루어집니다. 스톱을 삭제하면 구간이 줄어듭니다.

팔레트를 다른 곳으로 가져가기

팔레트 패널 하단 가장자리에 고정된 떠 있는 필은 전체 팔레트를 디자인 토큰(JSON), CSS 변수, CSS 클래스, SCSS 변수, GIMP 팔레트(.gpl) 또는 Adobe Swatch Exchange(.ase)로 다운로드합니다 - 그래서 브랜드가 Illustrator, Figma, GIMP나 스타일시트에 바로 들어갈 수 있습니다. 이 필은 패널의 스크롤 영역 바깥에 있어서, 팔레트를 아무리 스크롤해도 제자리를 지킵니다. (카탈로그 보기에서도 팔레트를 다운로드할 수 있습니다.)

타입

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file74 paths~11k nodes99 groups234 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file74 paths~11k nodes99 groups234 KB

이 방은 네 개의 역할 카드로 시작합니다 - 앱, 도구, 그리고 모든 내보내기가 실제로 읽어들이는 네 가지 서체입니다. 각 카드는 지금 그 역할을 담당하는 서체를 그 서체로 표시하고, 그 아래에 실제 문구 한 줄을 보여줍니다:

• 기본 - 본문, 버튼, 모든 도구.
• 제목 - h1/h2용 디스플레이 서체.
• 코드 - 코드와 데이터용 모노스페이스 서체.
• 이탤릭 - 강조, 인용, 부연 설명을 위한 진짜 이탤릭 서체.

제목, 코드, 이탤릭은 지정하기 전까지 각각 기본 서체로 대체되므로, 폰트 하나만 쓰는 브랜드는 여기서 아무것도 결정할 필요가 없습니다. 카드에서 무엇을 눌러도 바로 적용되지는 않습니다: 변경(빈 역할에서는 서체 선택)을 누르면 해당 역할로 범위가 좁혀진 비교 스테이지가 열립니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file59 paths~9.3k nodes73 groups196 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file59 paths~9.3k nodes73 groups196 KB

비교 스테이지

이 스테이지는 대화상자가 아니라 방 안에 인라인으로 열리므로, 원래 있던 카드가 화면에 그대로 남습니다. Google Fonts 패밀리(Inter, Fraunces, Space Grotesk…)를 검색하거나 폰트 파일을 놓은 뒤 비교에 추가를 누르면, 어느 것도 설치되기 전에 후보들이 같은 문구로 나란히 표시됩니다. Escape를 누르면 취소되고 열었던 카드로 키보드 포커스가 돌아갑니다.

그것이 유일한 입구이며, 그래서 브랜드에 보이지 않게 들어오는 것은 아무것도 없어요. 스테이지 아래에는 두 개의 관리 패널이 있어요:

• 이 기기의 폰트 - 설치된 모든 패밀리, 그것이 맡은 역할, 그리고 삭제 버튼. 여기서 서체 추가를 누르면 범위 제한 없이 같은 비교 스테이지가 열립니다.
• 내 폰트 - 내 컴퓨터에서 TTF, OTF 또는 WOFF를 업로드합니다. 이미 보유한 라이선스가 있는 기업 서체를 위한 경로입니다.

어느 쪽이든 서체는 이 기기에 남아, 앱과 도구, 모든 내보내기에서 렌더링되며, 영구적으로 오프라인으로 작동하고 브랜드 팩과 함께 이동합니다 - 렌더링 시점에 아무것도 가져오지 않습니다. Google Fonts의 모든 서체는 오픈 라이선스(OFL/Apache/UFL)로 제공됩니다.

하단의 타입 역할 패널은 각 역할의 실시간 견본을 보여줍니다 - 기본 서체로 된 본문과 UI, 상위 제목용 선택적 디스플레이 서체, 강조용 이탤릭, 코드와 데이터용 모노 서체 - 전체 세트가 함께 작동하는 모습을 볼 수 있습니다.

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file17 paths~5.6k nodes29 groups68 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file17 paths~5.6k nodes29 groups68 KB

토큰

코드를 건드리지 않고도 편집할 수 있는 디자인 시스템의 나머지 부분:

signed by Lollyvector SVG2026-09-03직접 확인하기Get the signed file73 paths~14k nodes95 groups1 image292 KBsigned by Lollyvector SVG2026-09-03직접 확인하기Get the signed file73 paths~14k nodes95 groups1 image292 KB

• 둥근 모서리 - 앱 전체의 카드, 버튼, 패널이 따르는 단일 반경 슬라이더(0–1.5rem).
• 추가 토큰 - 간격, 크기, 선 두께, 불투명도, 회전, 일반 숫자, 그림자를 추가하고 편집합니다. 유형을 고르고 이름을 붙인 뒤(Gutter, Card shadow…) 값을 설정하세요. 이들은 표준 디자인 토큰(DTCG)으로 저장되어 브랜드와 함께 이동합니다.

파일

로고를 제외하고 브랜드가 보관하는 파일 - 벡터, 이미지, 오디오, 모션(비디오, Lottie, 애니메이션) 에셋 - 을 여기에 놓으세요. 카탈로그에 들어가 섹션별로 정리되며, 모든 도구의 에셋 피커에서 바로 사용할 수 있습니다. 모든 것이 이 기기에 남습니다. (레일은 이 방을 파일이라고 표시하지만, URL 키는 catalogue로 유지됩니다. 패널 키는 영구적인 계약이기 때문입니다.)

브랜드 가져오기

레일 하단의 가져오기...를 누르면 2단계 피커가 열립니다. 첫 단계는 형식이 무엇인지가 아니라, 당신이 가진 것이 무엇인지를 묻습니다:

• 디자인 토큰 또는 디자인 파일 - DTCG나 Tokens Studio JSON, Penpot 프로젝트, 토큰 세트 zip, Lolly 디자인 시스템 팩 또는 SVG.
• PDF - 덱이나 가이드라인 파일로, 이 기기에서 색상, 마크, 내장 서체를 읽습니다.
• 이미지 - 스크린샷이나 사진. 색상이 이 기기에서 읽히며 아무것도 업로드되지 않습니다.
• 폰트 파일 - TTF, OTF 또는 WOFF. 타입 방이 열리고 그 서체가 설치됩니다.
• 웹사이트 - 페이지 하나를 색상과 타입 정보로 읽습니다. 이 타일은 실제로 페이지를 읽을 수 있는 기기에서만 나타나는데, 아무도 누를 수 없는 기능을 광고하는 비활성 타일은 타일이 아예 없는 것보다 나쁘기 때문입니다. 이 타일이 나타나는 경우 읽는 주체를 명확히 밝힙니다: 이 기기의 앱이 직접 가져오거나, 백그라운드 탭에서 사용자 계정으로 로그인한 브라우저 확장 프로그램이 읽습니다. URL을 지정하는 것은 필드를 미리 채우는 것일 뿐입니다 - 가져오기 버튼을 누르는 것이 동의이므로, 누군가 보낸 링크만으로는 절대 읽기가 시작되지 않습니다.

디자인 파일 소스를 선택하면 두 번째 단계는 아래 카드입니다: 지원되는 형식이 선호 순서대로 아이콘 타일로 앞에 배치되며, 카드 전체가 하나의 드롭 대상입니다 - 카드 어디를 클릭하거나 파일을 드래그해 놓아도 됩니다. 스튜디오에 파일을 바로 놓을 수도 있습니다.

signed by Lollyvector SVG2026-08-24직접 확인하기Get the signed file19 paths~3.2k nodes35 groups2 images175 KBsigned by Lollyvector SVG2026-08-24직접 확인하기Get the signed file19 paths~3.2k nodes35 groups2 images175 KB

각 디자인 파일이 제공하는 것:

• LollyBrand 팩(.zip) - 한 단계로 설치됩니다;
• Penpot 내보내기(.penpot) - 디자인 토큰을 가져옵니다;
• Design Tokens 파일(.json) - W3C DTCG;
• Tokens Studio 파일(.json) - Tokens Studio;
• 일반 SVG(.svg) - Lolly가 색상을 스캔하여 유지할 색상을 고를 수 있게 하며, 첫 번째 색상이 기본색이 됩니다.

소스 설치는 먼저 체크포인트를 저장하므로, "가져오기 이전으로 되돌리기"는 복원 한 번으로 끝납니다. 그리고 스캔에서 발견된 것이 바로 반영되지는 않습니다: 후보들은 트레이에 도착하며, 각각은 그 종류의 자료를 담당하는 방을 통해 개별적으로 눌러 추가됩니다.

#/start?source=<kind>는 지정된 소스(file, pdf, image, font, url)로 피커를 열고, ?import는 일반 목록으로 엽니다.

기기 간 브랜드 이동

레일 하단의 내보내기는 단일 LollyBrand-…zip 파일을 작성합니다 - 토큰, 폰트, 로고, 테마 설정이 담기며, 다시 가져올 때 검증하는 무결성 매니페스트도 함께 들어갑니다. 옆의 토큰(.json)은 순수한 디자인 토큰 문서만 단독으로 작성합니다: 폰트도, 로고도 없이 토큰만 있으며, 이것이 저장소나 CI 단계, 다른 토큰 도구가 실제로 읽는 것입니다.

다시 가져오는 방법은 가져오기... → 디자인 토큰 또는 디자인 파일(위 참고)이거나, 스튜디오에 드래그 앤 드롭하는 것입니다. 동료가 브랜드를 건네주거나, 두 번째 설치본으로 브랜드를 옮기는 방법이 바로 이것입니다 - 계정도, 클라우드도 필요 없습니다. 대신 명령줄에서 브랜드를 가져오려면 ingest:brand를 참고하세요.

버전

레일 아래쪽의 Versions는 디자인 시스템이 더 이상 움직이는 표적이 되지 않는 지점이에요. 하나를 게시하면 이 기기에 영구적이고 이름이 붙은 사본이 생겨요: 이후로는 절대 바뀌지 않으므로, 이를 고정한 도구는 항상 같은 것을 그려요. 게시할 것이 생기기 전까지 패널은 숨겨져 있으므로, 한 번도 게시하지 않은 스튜디오는 이 컨트롤을 볼 일이 없어요.

무언가를 누르기 전에 알아야 할 세 가지가 있고, 패널은 누른 뒤가 아니라 누르기 전에 세 가지를 모두 알려줘요.

• 버전은 영구적이에요. 아직 삭제 기능이 없으므로, 패널은 무엇이 보관되었고 계속 보관된다는 사실을 있는 그대로 알려줄 뿐, 거짓말하는 버튼을 두지 않아요.
• 삭제된 항목이 호환성 카드에서 가장 먼저 나와요. 추가되거나 변경된 토큰은 알림거리지만, 삭제된 토큰은 도구를 망가뜨리는 원인이므로 가장 먼저, 있는 그대로 이름 붙여 알려요.
• 게시는 되돌릴 수 없지만, 복원은 되돌릴 수 있어요. Restore latest from this version(이 버전에서 최신으로 복원)은 헤드에 대한 평범한 편집이므로 스튜디오의 실행 취소 스택에 올라가고, 패널은 곧바로 Undo(실행 취소)를 제공해요.

게시만 하기를 선택할 수도 있고, 게시하고 활성화를 선택할 수도 있어요 - 차이는 도구와 앱이 이제부터 그 버전을 따를지, 아니면 계속 최신 편집을 따를지예요. 다시 최신본 따르기를 선택하면 편집하는 순간 모든 변경이 바로 반영돼요. #/start?area=versions로 패널을 바로 열 수 있어요.

브랜드가 고정되어 있을 때

일부 빌드는 잠긴 브랜드로 출시돼요 - 색상, 글꼴, 토큰이 모든 도구와 내보내기가 사용하는 값으로 고정되어 있고, 바꿀 것이 없어요. 이 경우 스튜디오 대신 이 빌드는 고정된 브랜드로 출시되며 편집이 꺼져 있다는 짧은 안내가 표시돼요. 이는 의도된 것으로, 조직이 모든 것을 브랜드에 맞게 유지하도록 보장하는 방식이에요.

다음으로 갈 곳

• Lolly 사용하기 - 캔버스, 저장, 프로젝트, 카탈로그.
• 디자인 토큰 - 브랜드가 표현되는 토큰 모델.
• 내보내기 및 형식 - 인쇄 단위, CMYK, 브랜드가 렌더링되는 형식.