Description Marker v2 · 활용사례

v2 · 2026-09-15

v2에서 달라진 점

v1은 그대로 두고 위젯 id가 다른 v2를 따로 등록했습니다. 바뀐 것은 네 가지입니다.

01 폰트

Noto Sans KR로 통일

패널·마커·팝업의 모든 글자를 Noto Sans KR로 맞췄습니다. 일반 텍스트는 Regular 400, 번호 배지와 타이틀, 태그 뱃지는 Bold입니다. 위젯 API가 Google Fonts에 있는 폰트만 받아서 Pretendard는 쓸 수 없었습니다.

02 본문 서식

한 문단 안에서 굵게·색

본문 일부만 굵게 하거나 색을 줄 수 있습니다. ⋮ 안의 🎨 서식 버튼으로 팝업을 열고, 글자를 드래그로 선택한 뒤 툴바를 누릅니다. 색은 프리셋 10종과 hex 직접 입력을 씁니다.

03 레이아웃

헤더 행 + 본문 블록

번호 배지·태그·타이틀을 한 줄에 놓고, 본문은 그 아래 줄에서 태그·타이틀 열에 맞춰 시작합니다. 들여쓰기는 메인 36px, 하위 항목 48px입니다. 본문이 패널 오른쪽 끝까지 넓어졌습니다.

04 마커 팝업

태그 뱃지와 서식 반영

마커를 클릭하면 뜨는 팝업에 태그 뱃지가 타이틀 위로 올라왔습니다. 본문의 굵게·색과 줄바꿈도 패널에서 보던 그대로 나옵니다.

새 항목 레이아웃

첫 줄은 번호 배지, 태그 뱃지, 타이틀, 오른쪽 끝 컨트롤입니다. 본문은 다음 줄에서 태그 열부터 시작합니다.

가격 노출 규칙

샵다나와 공통

1 정책 샵다나와 비즈 가격 노출

⋮

할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다. 재고가 없으면 가격 대신 일시품절을 표시합니다.

2026-09-15 김태우

1-1

⋮

쿠폰 적용가는 별도 뱃지로 안내합니다.

번호 배지는 28×26, 태그 뱃지는 높이 26에 13px Bold입니다. 둘의 높이가 같아 첫 줄이 한 덩어리로 보입니다.

🎨 서식 팝업

창 크기는 580×470이고 툴바는 두 줄입니다. 글자를 드래그로 선택한 다음 버튼을 누릅니다. 선택 없이 누르면 텍스트를 먼저 선택하라는 토스트만 뜹니다.

B 서식 지우기 기본

#FFFFFF 적용 최근 드래그로 선택 후 클릭

할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다. 재고가 없으면 일시품절을 표시합니다.

취소 저장

첫 줄은 굵게(B), 서식 지우기, 프리셋 색 10종, 색을 빼는 기본 버튼입니다. 둘째 줄은 hex 입력칸과 적용, OS 색상 피커, 최근에 쓴 색 6개입니다. 최근 색은 프리셋에 없는 색을 썼을 때만 쌓입니다.

서식 팝업에서 주의할 점

흰색 계열은 쓰지 마세요 패널 배경이 흰색이라 글자가 보이지 않습니다. 형광펜 같은 배경색 기능은 없습니다.
hex 입력칸과 색 피커를 클릭하면 선택이 잠깐 풀립니다 팝업이 직전 선택 범위를 기억했다가 그대로 적용하니 다시 드래그할 필요는 없습니다.
저장을 눌러야 반영됩니다 저장 시 작성자와 날짜가 다시 찍힙니다. 취소는 아무것도 바꾸지 않습니다.

서식 표기법

서식은 본문 문자열 안에 표기로 저장됩니다. ⋮가 닫혀 있으면 서식이 적용된 모습으로, ⋮가 열려 있으면 아래 표기가 글자 그대로 보입니다. 팝업을 쓰지 않고 표기를 직접 타이핑해도 됩니다.

표기	결과
`굵게`	굵게 (fontWeight 700)
`{red}빨강{/red}`	빨강 #D14343
`{blue}파랑{/blue}`	파랑 #2563EB
`{purple}보라{/purple}`	보라 #6E62E5
`{gray}회색{/gray}`	회색 #8A8A8A
`{#FF8800}주황{/#FF8800}`	주황 임의 hex, 3자리 축약도 됩니다
`{red}필수{/red}`	필수 중첩은 순서를 가리지 않습니다
`\\`	** 이스케이프해서 표기 자체를 입력
`{pink}분홍{/pink}`	{pink}분홍{/pink} 모르는 이름은 글자 그대로

표기가 없는 v1 본문은 평문 그대로 보입니다. 저장 구조가 같아서 옮길 것이 없습니다.

사용가이드

버튼별 사용가이드

패널에 설명을 쓰고, 캔버스에 마커를 찍어 번호로 연결합니다. 아래 그림은 v2 레이아웃입니다. 버튼은 기능 묶음별 탭으로 정리했으니 왼쪽 위젯 그림과 오른쪽 요소 설명을 함께 보세요.

패널 · 항목 기본 항목 편집 (⋮ 열림) 순서 조작 마커 · 팝업 · 우클릭

가격 노출 규칙

샵다나와 공통

1 정책 샵다나와 비즈 가격 노출

⋮

할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.

2026-09-15 김태우

1-1

⋮

쿠폰 적용가는 별도 뱃지로 안내합니다.

2 오류 재고 0일 때 구매 버튼

⋮

재고가 0이면 구매 버튼을 비활성화하고 알림받기로 전환합니다.

+ 항목 추가

패널 헤더

위 칸은 화면 제목(20/700), 아래 칸은 서브 제목(경로)입니다. 클릭해서 바로 입력합니다.

상품 상세 화면

SHOP > 상품 > 상세

헤더 행과 본문 블록

첫 줄에 번호 배지, 태그 뱃지, 타이틀이 가로로 놓이고 오른쪽 끝에 컨트롤이 붙습니다. 본문은 다음 줄에서 태그·타이틀 열에 맞춰 시작해 패널 오른쪽 끝까지 씁니다. 들여쓰기는 메인 36px, 하위 항목 48px입니다.

1 정책 타이틀

⋮

본문은 여기서 시작합니다.

+ 항목 추가

패널 맨 아래에 항목을 하나 더 붙입니다. 번호는 자동으로 1, 2, 3…으로 매겨집니다.

+ 항목 추가

번호 배지 (Click To Go)

항목 번호입니다. 폭은 메인 28px, 하위 항목 40px로 고정이고 높이는 26px입니다. 클릭하면 이 항목의 마커로 뷰포트가 이동하고, 마커가 여러 개면 다시 눌러 순환합니다.

1메인

1-1하위

태그 뱃지

v2에서 높이 26px, 13px Bold로 커졌습니다. 번호 배지와 높이가 같아 첫 줄에 나란히 놓입니다. 값이 없으면 자리를 차지하지 않습니다.

정책 디자인 오류

⋮ 편집 열기/닫기

항목의 편집 컨트롤(태그·타이틀·액션·순서)을 펼치거나 접습니다. 접으면 본문 서식이 적용된 모습으로 보여서 캡처하기 좋습니다.

⋮

닫힘

⋮

열림

Visible 토글

항목을 표시하거나 숨깁니다. 끄면 항목과 마커가 흐려집니다. 화면에서 지우지 않고 비활성으로 표시합니다.

켜짐

꺼짐

가격 노출 규칙

샵다나와 공통

2 정책

PC견적 가격 노출

⋮

작게 보통 크게 ✕ 타이틀

할인가가 있으면 정가에 취소선을 긋고 **할인가**를 강조합니다.

서식은 🎨 서식 버튼으로 · 여기선 표기가 글자 그대로 보입니다

2026-09-15 김태우

Sub 추가 링크 이미지 서식1 마커 생성 삭제 ✕ 닫기

타입 태그

정책·디자인·오류·필수·선택·예외 프리셋 중 하나를 고르거나 직접 입력합니다. ✕로 태그를 지웁니다. 고른 값은 첫 줄의 태그 뱃지로 올라갑니다.

타이틀

첫 줄 오른쪽에 들어가는 제목입니다. 편집 중에는 입력칸으로 바뀝니다. 크기 3단계(작게 13 · 보통 16 · 크게 20)와 색 6종을 고르고, ✕ 타이틀로 제목만 지웁니다.

가격 노출 규칙

작게 보통 크게 ✕ 타이틀

본문

설명을 쓰는 여러 줄 입력칸입니다. 편집 중에는 **굵게** 같은 서식 표기가 글자 그대로 보이고, ⋮를 닫으면 적용된 모습으로 바뀝니다. 저장하면 작성자와 날짜가 자동으로 찍힙니다.

할인가가 있으면 **정가**에 취소선을 긋고 {red}할인가{/red}를 강조합니다.

할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.

위: ⋮ 열림 · 아래: ⋮ 닫힘

1 🎨 서식

v2에서 추가된 액션입니다. 580×470 팝업이 열리고, 본문을 드래그로 선택한 뒤 굵게·색을 누릅니다. 메인 항목과 하위 항목 모두 있습니다. 자세한 툴바 설명은 v2에서 달라진 점에 있습니다.

서식1 → 본문 서식 팝업

액션 행

본문 아래 버튼 묶음입니다. Sub 추가는 하위 항목을 만들고, 링크는 URL 입력칸을 열고, 이미지는 삽입 창을 띄우고, 서식은 본문 서식 팝업을 열고, 마커 생성은 패널 왼쪽에 마커를 만들고, 삭제는 항목·하위·이미지를 함께 지웁니다.

Sub 추가 링크 이미지 서식1 마커 생성 삭제 ✕ 닫기

가격 노출 규칙

샵다나와 공통

2 PC견적 가격 노출

⋮

할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.

위로

항목을 한 칸 위로 옮깁니다. 메인 항목에서만 나오는 컨트롤입니다.

아래로

항목을 한 칸 아래로 옮깁니다. 메인 항목에서만 나오는 컨트롤입니다.

위에 삽입

이 항목 바로 앞에 빈 항목을 끼워 넣습니다. 메인 항목에서만 나오는 컨트롤입니다.

1 2

가격 노출 규칙

샵다나와 공통

1 정책 비즈 가격

⋮

판매점의 최저 가격을 노출합니다.

2 PC견적 가격 노출

⋮

마커 배지 (3종)

캔버스에 찍히는 배지입니다. 기본은 보라 pill, 숨긴 항목은 흐리게, 연결된 항목이 사라진 고아 마커는 빨강으로 표시됩니다.

1기본

2숨김

7고아

마커 클릭 → 디스크립션 팝업

캔버스의 마커 배지를 클릭하면 연결된 항목을 읽기 전용 팝업으로 보여줍니다. v2에서는 태그 뱃지가 타이틀 위에 뜨고, 본문의 굵게·색과 줄바꿈이 패널에서 보던 그대로 나옵니다.

1 →

우클릭 property 메뉴

패널 위젯을 우클릭하면 나오는 메뉴입니다. 마커 일괄 생성(없는 항목만), 마커 동기화(번호·상태 갱신), 고아 마커 삭제(연결 끊긴 것), 패널 폭(400~1000) 조절을 다룹니다.

마커 일괄 생성 없는 항목만

마커 동기화 번호·상태 갱신

고아 마커 삭제 연결 끊긴 것

패널 폭 400 ~ 1000

팀 공유

팀원이 직접 쓰는 법

커뮤니티 게시 대신 각자 개발 위젯으로 import해서 씁니다. 다나와 디자인팀 Figma가 Professional 플랜이라 조직 비공개 게시가 안 돼서 택한 방식입니다. 각자 1회만 하면 됩니다.

⬇ v2 위젯 파일 다운로드 (zip) manifest.json(v2 id) + dist/code.js + README.md + 팀공유-dev-import.md가 들어 있습니다.

v1을 계속 쓰는 경우에는 v1 위젯 zip을 그대로 받으면 됩니다. 이미 v1로 만든 문서는 손댈 필요가 없습니다.

공존

v1과 v2는 같이 씁니다

위젯 id가 다릅니다. v1은 1659437107929599498, v2는 1681495622985026206입니다. 같은 id를 다시 쓰면 한 파일에서 둘 중 하나만 뜹니다.
v1로 만든 기존 문서는 계속 v1로 렌더됩니다. 새로 만드는 문서에 v2를 쓰면 됩니다.
v1 패널의 마커를 v2 패널로 옮길 수는 없습니다. 마커는 자기 패널에서 생성한 것만 동기화됩니다.

zip을 받아 로컬 디스크에 풀기

위 버튼으로 v2 zip을 받아 내 PC의 로컬 디스크에 풉니다(예: C:\Projects\Description Marker v2). 클라우드 동기화 폴더가 아닌 로컬 폴더에 두세요.

Figma 데스크톱 앱에서 import

웹에서는 되지 않습니다. 캔버스 우클릭 → 위젯 → 개발 → Import widget from manifest… → 로컬의 manifest.json을 고릅니다.

삽입

우클릭 → 위젯 → 개발 → Description Marker v2를 선택해 캔버스에 올립니다. v1을 함께 import해 뒀다면 목록에 둘 다 보입니다.

같은 id로 import가 거부되면

우클릭 → 위젯 → 개발 → 새로운 위젯…으로 빈 스캐폴드를 만든 뒤, 그 폴더의 dist/code.js를 zip 안의 dist/code.js 내용으로 교체합니다. 그 폴더의 manifest.json에 "permissions": ["currentuser"]도 넣어야 합니다. 이 값이 없으면 작성자 스탬프가 빈칸으로 찍힙니다.

먼저 알아둘 원리

보는 것 ≠ 쓰는 것. 위젯이 캔버스에 올라가면 마지막 렌더 모습은 누구에게나 보입니다. 하지만 버튼 클릭·항목 편집·마커 이동 같은 조작은 그 위젯을 import한 사람만 할 수 있습니다.
편집 권한 필요. 위젯 조작은 그 파일에 편집(can edit) 권한이 있어야 가능합니다. 뷰 권한만 있으면 위젯이 잠겨 보입니다. 그래서 편집할 팀원은 전원 각자 import해야 합니다.
자동 업데이트 없음. dist/code.js를 고치면 팀원들은 바뀐 파일을 다시 받아 재import(또는 파일 교체)해야 최신이 됩니다. 게시 위젯과 달리 중앙 배포가 되지 않습니다.

Description Markerv2

왜 만들었고, 무엇이 달라졌나

유료 위젯에 묶여 있었습니다

Claude Code로 자체 개발

무료 위젯과 공유 방식 확보

v2에서 달라진 점

Noto Sans KR로 통일

한 문단 안에서 굵게·색

헤더 행 + 본문 블록

태그 뱃지와 서식 반영

새 항목 레이아웃

🎨 서식 팝업

서식 팝업에서 주의할 점

서식 표기법

버튼별 사용가이드

팀원이 직접 쓰는 법

v1과 v2는 같이 씁니다

zip을 받아 로컬 디스크에 풀기

Figma 데스크톱 앱에서 import

삽입

같은 id로 import가 거부되면

먼저 알아둘 원리