Lolly 사용하기

앱을 실제로 사용하는 방법을 다루는 실전 가이드예요 — 도구 열기, 캔버스에서 작업하기, 내보내기, 저장, 공유까지요. 여기서 다루는 모든 것은 기기 안에서 실행돼요. 계정도, 업로드도 필요 없고, 처음 불러온 뒤에는 인터넷 연결도 필요 없어요.

처음 오셨나요? 빠른 시작으로 몇 분 만에 만들기를 시작할 수 있고, 앱 설치·배포는 오퍼레이터를 위한 Lolly에서 다뤄요. 이 페이지는 앱을 연 다음 실제로 다루는 방법을 설명해요.

도구 열기

A tool's split view - the control stack on the left, and the live horizontal bar chart it draws on the right

The tool gallery - every tool as a card, grouped by category

A tool's split view - controls on one side, the live canvas on the other

홈 화면은 갤러리예요 — 모든 도구가 카테고리별로 묶여 있어요. 카드를 클릭하면 도구가 열려요. 예전에 작업한 적이 있으면 Continue 버튼으로 가장 최근 세션을 이어서 열 수 있어요. 검색창으로 이름을 기준으로 필터링할 수 있어요.

각 도구는 분할 화면이에요. 한쪽에는 컨트롤, 다른 쪽에는 실시간 미리보기(캔버스)가 있어요. 컨트롤을 바꾸면 미리보기가 즉시 업데이트돼요.

일부 도구(Layout Studio 등)는 대신 프리 캔버스로 열려요 — 크롬 없이 직접 조작하는 화면으로, 텍스트·도형·이미지 박스를 드래그, 크기 조절, 회전, 스냅할 수 있고, 더블클릭으로 텍스트를 그 자리에서 바로 편집할 수 있어요. 다른 모든 도구와 같은 렌더 경로로 내보내지므로 캔버스 자체가 파일이 돼요. 아래 프리 캔버스 항목을 참고하세요.

캔버스(미리보기)

The zoom HUD in the corner of the canvas - minus, the live percentage, plus, Fit, then the theme and sound toggles

미리보기에는 내보낼 결과가 항상 정확히 그대로 표시돼요.

데스크톱

확대/축소: Cmd/Ctrl + 스크롤, 또는 트랙패드 핀치 — 확대/축소는 포인터 위치를 중심으로 이뤄져요.
이동: Space를 누른 채 드래그하거나 마우스 가운데 버튼으로 드래그하세요. (일반 클릭은 디자인 요소를 클릭하는 데 그대로 쓸 수 있어요.)
키보드: 0 = 창에 맞추기 · 1 = 100% · + / − = 확대/축소.
확대/축소 HUD: 모서리에 있는 작은 − NN% + Fit 컨트롤이에요. 퍼센트 숫자를 클릭하면 Fit ↔ 100%를 전환할 수 있어요.

터치

핀치로 확대/축소, 드래그로 이동, 더블탭으로 Fit 상태로 재설정하세요.

클릭해서 컨트롤로 이동하기: 디자인 안의 요소를 클릭하면 사이드바에서 대응하는 입력 항목에 포커스가 가고 화면에 보이도록 스크롤돼요 — 반복되는 행 그룹이라면 클릭한 바로 그 행이 펼쳐지므로, 눈에 보이는 것을 편집하는 데 탭 한 번이면 충분해요.

크기를 바꾸면 화면은 항상 깔끔한 Fit 상태로 돌아가요.

프리 캔버스(Layout Studio)

Layout Studio's free canvas - the artboard with its surrounding pasteboard

프리 캔버스 도구는 아트보드 주위에 작업 공간을 더해줘요. 디자이너의 페이스트보드 같은 느낌이에요.

캔버스 밖 임시 배치. 박스를 프레임 가장자리 밖으로 드래그해도 여전히 완전히 보이고 선택 가능한 상태로 남아요 — 구성을 정리하는 동안 요소를 옆에 잠시 놓아뒀다가 나중에 다시 안으로 드래그해 넣으면 돼요. 프레임 바깥의 모든 것은 은은하게 흐려져서 내보내기 영역이 한눈에 파악되고, 프레임에는 그림자가 남아 파일이 정확히 어디서 시작되는지 표시해줘요.
프레임 안쪽만 내보내져요. 내보낸 파일은 아트보드 범위로 한정돼요 — 바깥에 남아 있는 것(또는 박스가 가장자리 밖으로 걸쳐 있는 부분)은 래스터든 벡터든 형식과 상관없이 그냥 결과물에서 잘려나가요.
프레임에서 멀리 떨어진 곳까지 요소를 배치했다면 Fit 이상으로 축소(최소 20%까지)해서 페이스트보드 전체를 볼 수 있어요.
크기 조절 가능한 아트보드. 내보내기 크기를 바꾸면 프레임이 그 자리에서 크기가 바뀌어요. 박스는 위치를 그대로 유지하기 때문에, 기존 콘텐츠를 중심으로 레이아웃을 다시 짤 수 있어요.

휴대폰에서

A tool on a phone-width screen - controls as a sheet up top, the generated palette filling the preview below, and the render pill floating bottom-centre

화면이 좁으면 레이아웃이 한 열로 재배치돼요.

컨트롤은 상단의 시트가 되고 아래쪽 가장자리에 드래그 그립이 붙어요. 그립을 드래그해서 크기를 조절할 수 있고 — peek / half / full로 스냅돼요 — 또는 그립을 탭해서 접기 ↔ 펼치기를 전환할 수 있어요. 미리보기는 아래 공간을 채우고, 편집하는 동안에도 계속 보여요.
떠 있는 Render 버튼을 누르면 Export 시트가 열려요 — 포맷, 크기, 복사, 저장, 다운로드 컨트롤이 모두 한곳에 모여 있어요. 배경을 탭하면 닫을 수 있어요.

컨트롤(입력 항목)

A tool's control stack - a text field, colour triggers and a slider, and nothing else the author chose to lock down

도구는 바뀔 수 있도록 의도된 입력 항목만 노출해요 — 그 외 나머지(색상, 레이아웃, 타이포그래피, 로직)는 도구 작성자가 고정해두었기 때문에, 무엇을 만들든 작성자가 정한 규칙을 따르게 돼요. 입력 항목에는 텍스트, 슬라이더, 색상 선택기, 드롭다운, 날짜, 이미지 선택기, 반복 행 그룹 등이 있어요. 일부는 접을 수 있는 섹션으로 묶여 있어요.

초기화: Clear changes를 누르면 모든 입력 항목이 기본값으로 돌아가요.

내 정보와 프로필 사진

프로필(갤러리 오른쪽 위)에는 이름, 연락처, 선택 항목인 프로필 사진이 저장돼요. 이 항목을 필요로 하는 도구는 자동으로 미리 채워줘요 — 한 번 설정해두면 이메일 서명, 락업, 배지가 저절로 채워져요. 세션마다 원하는 항목을 직접 덮어쓸 수도 있어요. 도구가 이 정보를 읽을 수 있게 하려면 Use my details를 켜세요.

프로필 사진과 정보는 이 기기에만 저장돼요. 프로필이 뜻하는 건 꼭 한 사람만이 아닐 수도 있어요 — 팀이거나, 가끔 맡는 역할일 수도 있고요. 여러 개를 유지하는 방법을 포함한 전체 내용은 Profiles를 참고하세요.

저장하고 이어서 하기

The two-half render pill - an up arrow that opens the export panel, and a tick that saves the session in place

Save를 클릭하면 현재 입력 내용이 해당 도구의 세션으로 저장돼요. 도구마다 이름이 붙은 세션을 여러 개 유지할 수 있고, 각 도구의 Continue 버튼으로 가장 최근 세션을 다시 열 수 있어요. 히스토리 버튼(오른쪽 위, 프로필 옆)에는 모든 도구에 걸쳐 저장된 세션이 전부 나열돼요. 세션은 기기에 로컬로 저장돼요. 정리하려면 아래의 Projects를 열어보세요.

Projects

Projects - saved sessions organised into nestable folders

Projects — Tools 옆의 Projects 탭에서 열거나, 프로필 → 스토리지 → Organise in Projects에서 열 수 있어요 — 는 저장한 모든 것의 보금자리이고, 파일 관리자처럼 동작해요.

중첩되는 폴더. 저장된 세션을 폴더로 묶고, 폴더 안에 폴더를 원하는 만큼 깊게 만들 수 있어요. 폴더를 만들고, 이름을 바꾸고, 타일을 다른 폴더 위로 드래그해서 옮길 수 있어요. 브레드크럼으로 상위 폴더로 돌아갈 수 있어요. 항상 존재하는 Uncategorised 폴더에는 아직 정리하지 않은 항목이 들어가요.
새 작업을 바로 정리하기. 폴더 안에서 + New tool을 누르면 도구가 열리고, 첫 저장이 자동으로 그 폴더에 들어가요.
다중 선택(데스크톱). 타일의 체크박스를 선택하거나, 빈 캔버스 위에서 선택 박스를 드래그하거나, Shift/Cmd 클릭하세요. 타일을 우클릭하면 컨텍스트 메뉴가 나와요. 선택한 항목 전체에 한 번에 작업을 적용할 수 있어요.
폴더나 선택 항목 전체 렌더링. Render folder는 폴더 안의 모든 저장된 세션 — 하위 폴더를 포함해서 — 을 중첩된 .zip 하나로 내보내요. Render selection은 다중 선택에 대해 같은 일을 하고, 세션이 하나뿐이면 바로 그 파일로 렌더링돼요. Batch/Pro가 필요 없어요.
저장된 세션 공유하기. 세션을 우클릭 → Share link를 선택하면 정확히 같은 입력값으로 다시 여는 링크가 복사돼요(전체 Share 대화상자는 아래를 참고하세요).

링크 공유하기

모든 입력값은 페이지 URL에 담기기 때문에, 링크 자체가 디자인이에요. 내보내기 컨트롤의 Share를 사용하거나 — 또는 Projects에서 저장된 세션의 Share link를 사용해서 — Share 대화상자를 열어보세요. 바로 복사할 수 있는 링크와 함께, 링크 암호화 여부, 열었을 때의 동작(전체 화면, 내보내기 패널 펼치기, &export로 열자마자 다운로드, &copy로 클립보드에 복사)을 설정하는 토글이 있어요.

복잡한 디자인은 URL이 길어지기 마련이라, 대화상자는 전체 상태를 압축된 토큰 하나에 담는 Shortest link도 제공해요 — 읽기 쉬운 형태도 항상 함께 있어요. 동료에게 붙여넣거나, 북마크하거나, 커밋해두세요. (자세한 내용: URL Mode.)

기기에서 업로드한 이미지는 공유 링크에 포함되지 않아요 — 해당 이미지는 그 기기에만 존재해요.

라이브 카메라(모션 반응형 도구)

사진 필터 — Halftone, Scanline, Posterize, Duotone — 는 카메라를 쓸 수 있는 곳에서 Go live 버튼을 보여줘요. 켜면 이펙트가 웹캠 화면을 프레임 단위로 따라가면서 움직임에 반응해요. 결과는 GIF, WebM, MP4로 녹화할 수 있어요. 프레임은 기기 안에서 읽고 처리되며 절대 밖으로 나가지 않고, 도구를 멈추거나 벗어나는 순간 카메라는 해제돼요. (어떤 이미지 선택기든 Take a photo로 한 프레임을 온디바이스 이미지로 바로 찍을 수 있어요.)

My images

도구에서 기기의 이미지를 추가할 수 있는 경우, 그 이미지는 축소되고 EXIF/GPS 정보가 제거된 뒤 개인 My images 라이브러리(프로필 → 스토리지 아래)에 저장돼요. 어떤 도구에서든 다시 사용할 수 있어요. 라이브러리는 용량 제한이 있고 완전히 로컬이에요 — 거기서 이미지를 관리하거나 삭제할 수 있어요.

Catalogue — 내 에셋 라이브러리

The Catalogue - brand assets, swatches and fonts, plus your own uploads

Catalogue(#/c, 또는 메뉴의 Catalogue 링크)는 도구가 활용할 수 있는 모든 것 — 브랜드 로고, 이미지, 오디오, 모션 — 을 종류별로 모아둔 곳이고, 직접 만든 창작 파일도 여기에 함께 있어요. 서버도, 관리 콘솔도, 풀 리퀘스트도 필요 없어요. 모든 게 기기 안에 있어요.

파일 가져오기. 이미지, SVG, 오디오 클립, 동영상, Lottie, PDF를 업로드 영역에 드래그하거나 — 또는 클릭해서 선택하면 — 즉시 카탈로그에 들어가고, 모든 도구의 에셋 선택기에서 바로 쓸 수 있어요. 얼마든지 담아도 괜찮아요. 기기 밖으로 절대 나가지 않아요.
자주 쓰는 것 즐겨찾기. 에셋(또는 브랜드 스와치)에 ★ 표시를 하면 모든 선택기의 맨 위에 고정되어서, 자주 쓰는 로고나 색상을 클릭 한 번으로 바로 쓸 수 있어요.
정리하기. 에셋을 다른 그룹으로 재분류하거나, 쓰지 않는 공유 브랜드 에셋을 숨기거나(Show hidden으로 다시 불러올 수 있어요), 직접 업로드한 파일을 완전히 삭제할 수 있어요.

팔레트와 폰트를 어디서나 쓰기

The Swatches panel - the five palette download buttons across the top, then every brand colour as a copyable chip

Catalogue의 Swatches 패널은 단순히 참고용이 아니에요 — 색상을 클릭해서 복사하거나, 다른 도구가 이해하는 포맷으로 브랜드 팔레트 전체를 다운로드할 수 있어요.

Design tokens (JSON), CSS variables, 또는 CSS classes — 브랜드를 스타일시트나 빌드에 바로 넣을 수 있어요.
Adobe Swatch Exchange (.ase) — Illustrator나 Photoshop에 불러올 수 있어요.
GIMP palette (.gpl) — GIMP나 Inkscape용이에요.

Fonts 패널에는 브랜드 서체가 나열되고 각 서체 옆에 download가 있어서, 로컬에 설치하거나 인쇄소에 전달할 수 있어요. (Brand Studio의 Colours 탭에서도 같은 팔레트 다운로드를 제공해요.)

에셋은 열려 있고 스스로 해내는 방식의 절반이고, 나머지 절반은 직접 도구를 만드는 것이에요 — 프리 캔버스(위에서 설명한 Layout Studio)를 쓰면 코드 없이도 시각적으로 도구를 만들 수 있어요.

사운드와 접근성

Lolly는 누구에게나 편안하게 쓸 수 있는 걸 목표로 해요. 인터페이스는 키보드로 탐색할 수 있고, 커스텀 컨트롤에는 스크린 리더를 위한 적절한 라벨이 붙어 있으며, 각 도구의 실시간 미리보기는 무엇을 만들고 있는지 설명하는 라벨이 달린 이미지 하나로 노출돼요.

은은한 보조 사운드 레이어가 동작을 확인해줘요 — 갤러리 진입, Content Credentials의 유효/무효 확인, 패널 닫기, 필터 전환 같은 순간이에요. 기본으로 켜져 있지만 언제든 끌 수 있어요. 스위치가 나타나는 어디에서든(각 화면의 옵션 팝오버, 또는 프로필) Sound를 끄면 그 선택이 기억돼요.

그 스위치 옆에는 Neurospicy Mode가 있어요 — 작업하는 동안 조용히 재생되는, 선택 가능한 차분한 배경 집중 트랙이에요. 켜면 앱 전체를 따라다니는 작은 플레이어 독이 하단 모서리에 열려요. 여기서 트랙을 검색하고 고르거나, 앞뒤로 건너뛰거나, 볼륨을 설정하거나, 최소화하거나 닫을 수 있어요. 트랙 목록은 몇 가지 카테고리로 나뉘어요 — 프로시저럴 방식의 Lolly Sings 곡, 앰비언트 루프와 비트, 직접 업로드한 오디오, 그리고 실시간 인터넷 라디오 방송국 몇 개예요(라디오는 연결이 필요하지만 나머지는 오프라인에서도 재생돼요). 기본으로 꺼져 있고, Sound와 마찬가지로 세션과 기기를 넘나들며 선택이 기억돼요. Sound를 끄면 집중 트랙도 함께 음소거돼요.

저장소와 프라이버시

모든 것은 브라우저의 로컬 데이터베이스(IndexedDB)에 저장돼요. 프로필, 저장된 세션, 업로드한 이미지, 다운로드한 카탈로그 콘텐츠의 캐시가 여기 들어가요. 프로필 → 스토리지에서 사용량을 확인하고 다음을 할 수 있어요.

Clear cache — 다운로드한 카탈로그 콘텐츠를 삭제해요(다음에 불러올 때 다시 동기화돼요).
Clear all my data — 프로필, 세션, 이미지를 모두 지워요. 되돌릴 수 없어요.

그 무엇도 어디로도 전송되지 않아요. 원격 측정도, 클라우드 렌더링도 없어요.

다른 기기로 옮기기

모든 것이 기기 안에 있기 때문에, 프로필 → 스토리지 → Move to another device를 쓰면 계정도 클라우드도 없이 이 모든 걸 두 번째 설치본으로 그대로 옮길 수 있어요.

Export my data는 LollyTools-<First>-<Last>-<YYYY-MM-DD>-<n>.zip 파일 하나를 다운로드해요(이름 부분은 프로필에서 가져오고 설정되어 있지 않으면 생략돼요. <n>은 같은 날 내보낸 파일끼리 충돌하지 않도록 하는 일별 카운터예요). 여기에는 프로필, 저장된 모든 세션(썸네일 포함), 업로드한 이미지, 환경설정(테마, 사이드바 너비, 로컬 활동 통계)이 들어 있어요.
다른 설치본에서 Import data…를 실행하면 그 파일을 다시 읽어들여요. 이 과정은 병합 방식이에요. 이름이 같은 항목(프로필, 세션 슬롯, 이미지)은 가져온 사본으로 교체되고, 그 기기에 있던 나머지는 그대로 유지돼요. 저장된 세션은 가져온 이미지에 자동으로 다시 연결돼요.

카탈로그 캐시는 포함되지 않아요 — 새 기기에서 스스로 다시 다운로드돼요. 번들은 평범한 zip 파일(manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json, 포맷 id lolly-backup)이라서 이메일, USB, AirDrop을 거쳐도 손상 없이 그대로 도착하고, 모든 셸이 읽는 포맷과 동일해요. 각 부분에는 체크섬이 있어서, 전송 중 손상된 파일은 어중간하게 복원되지 않고 가져오는 시점에 걸러져요. (전체 포맷 사양: Data Transfer.)

디자인 가져오기(Figma, Penpot, Illustrator, InDesign)

기존 디자인을 Lolly로 가져와 계속 작업할 수 있어요. Layout Studio를 열고 캔버스 툴바에서 Import a design을 클릭한 다음, Figma .fig 또는 SVG, Penpot .penpot, Illustrator .ai / .pdf, 또는 InDesign .idml을 선택하세요. 레이어는 프리 캔버스 위의 편집 가능한 박스가 돼요 — 텍스트는 다시 입력할 수 있는 상태 그대로, 이미지는 My images로 들어가고, 서체와 색상은 브랜드 전역 설정을 따라요 — 이후 결과물은 다른 세션과 똑같이 저장, 공유, 렌더링할 수 있어요. 파싱은 전부 기기 안에서 이뤄져요. 자세한 내용: Import a design.

내보내기

포맷 선택, 출력 크기와 인쇄 단위, 투명도, 동영상, 복사/공유에 대한 자세한 내용은 Exporting & Formats를 참고하세요. 요약하면, 포맷을 고르고, 필요하면 크기를 설정한 다음 Download(또는 클립보드로 Copy)하면 돼요.

Batch(Pro) 모드

The batch toolbar - zip name, units, DPI and the format every row inherits, with Sessions and Render on the right

파워 유저를 위한 Batch(갤러리에서 연결되고, 기본으로 켜져 있는 Pro 기능 플래그 뒤에 있어요)는 여러 변형을 한 번에 렌더링해요 — 각 행이 하나의 입력 세트인 그리드로, 함께 내보내져요. 카드를 십여 개 언어로 로컬라이즈하거나 모든 크기 변형을 한 번에 생성하는 데 이상적이에요. 행은 직접 입력하거나, 스프레드시트에서 바로 붙여넣거나, CSV를 가져와서(다시 내보낼 수도 있어요) 채울 수 있고, 행마다 포맷, 크기, 출력 파일명을 설정할 수 있어요. 그리드 전체를 이름이 붙은 batch 세션으로 저장해서 갤러리에서 다시 열 수 있고, 모든 행을 .zip 하나로 다운로드할 수 있어요.

Batch는 하나의 템플릿에서 나온 여러 변형을 한 번에 만들기 위한 기능이에요. 이미 저장한 세션을 다시 렌더링하려면 위에서 설명한 Projects → Render folder / Render selection을 사용하세요 — Pro는 필요 없어요.

오프라인과 설치

Lolly는 PWA예요. 처음 불러온 뒤에는 오프라인에서도 작동해요 — 브라우저 주소창에서(모바일에서는 Add to Home Screen으로) 설치하면 앱처럼 전체 화면으로 쓸 수 있어요. 온라인으로 돌아오면 자동으로 업데이트돼요.