Description Marker

화면설계서 위에 설명(디스크립션)을 항목으로 달고, 캔버스 곳곳에 번호 마커를 찍어 패널과 연결하는 Figma 위젯입니다. 유료로 쓰던 "Description panel"을 대체하려고 Claude Code로 직접 만들었습니다.

유료 → 무료
외부 유료 위젯을 자체 위젯으로 대체
단위테스트 통과
순수 로직 34 · 위젯 로직 22
TypeScript
Figma Widget API · esbuild 번들
활용사례

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

화면설계서를 그리다 유료 위젯 의존을 걷어낸 과정입니다. 반복해서 쓰는 도구인데 계정에 묶여 있으니, 팀에서 함께 쓰기가 불편했습니다.

문제

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

화면설계서가 유료 위젯 "Description panel"에 의존했습니다. 그런데 이 위젯은 계정별 라이선스라, 결제한 사람만 설명 패널을 새로 달거나 편집할 수 있었습니다. 팀원마다 결제 상태가 달라 함께 쓰기가 어려웠습니다.

해결

Claude Code로 자체 개발

필요한 기능만 추려 Claude Code로 직접 만들었습니다. 설계서를 먼저 쓰고 구현한 뒤 단위테스트로 로직을 확인했고, Figma 데스크톱에서 실제로 붙여 검증했습니다.

성과

무료 위젯과 공유 방식 확보

결제 없이 누구나 쓸 수 있는 위젯이 생겼습니다. 커뮤니티에 게시하는 대신, dev manifest import로 팀원이 각자 받아 쓰는 경로도 함께 정리했습니다.

사용가이드

버튼별 사용가이드

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

가격 노출 규칙
샵다나와 공통
1
정책
샵다나와 비즈 가격 노출
할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.
2026-07-19 김태우
⋮
1-1
쿠폰 적용가는 별도 뱃지로 안내합니다.
⋮
2
오류
재고 0일 때 구매 버튼
재고가 0이면 구매 버튼을 비활성화하고 알림받기로 전환합니다.
⋮
+ 항목 추가
패널 헤더

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

상품 상세 화면
SHOP > 상품 > 상세
+ 항목 추가

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

+ 항목 추가
번호 배지 (Click To Go)

항목 번호입니다. 클릭하면 이 항목의 마커로 뷰포트가 이동합니다. 마커가 여러 개면 다시 눌러 순환합니다.

1
⋮ 편집 열기/닫기

항목의 편집 컨트롤(타입·타이틀·액션·순서)을 펼치거나 접습니다. 접으면 캡처용으로 깨끗하게 보입니다.

⋮
닫힘
⋮
열림
Visible 토글

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

켜짐
꺼짐
가격 노출 규칙
샵다나와 공통
2
정책 디자인 오류 필수 선택 예외 직접입력 ✕
PC견적 가격 노출
작게 보통 크게 ✕ 타이틀
할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.
2026-07-19 김태우
⋮
Sub 추가 링크 이미지 마커 생성 삭제 ✕ 닫기
타입 태그

정책·디자인·오류·필수·선택·예외 프리셋 중 하나를 고르거나 직접 입력합니다. ✕로 태그를 지웁니다.

정책 디자인 오류 필수 선택 예외 직접입력 ✕
타이틀

본문 위의 굵은 제목입니다. 크기 3단계(작게 13 · 보통 16 · 크게 20)와 색 6종을 고릅니다. ✕ 타이틀로 제목만 지웁니다.

가격 노출 규칙
작게 보통 크게 ✕ 타이틀
본문

설명을 쓰는 여러 줄 입력칸입니다. 저장하면 작성자와 날짜가 자동으로 찍힙니다.

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

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

Sub 추가 링크 이미지 마커 생성 삭제 ✕ 닫기
가격 노출 규칙
샵다나와 공통
2
PC견적 가격 노출
할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.
⋮
위로

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

아래로

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

위에 삽입

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

1 2
가격 노출 규칙
샵다나와 공통
1
샵다나와 비즈 가격 노출
판매점의 최저 가격을 노출합니다.
⋮
2
PC견적 가격 노출
⋮
마커 배지 (3종)

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

1기본
2숨김
7고아
마커 클릭 → 디스크립션 팝업

캔버스의 마커 배지를 클릭하면 연결된 항목의 타이틀·본문·이미지를 읽기 전용 팝업으로 보여줍니다. 화면 위에서 설명을 바로 확인하는 용도입니다.

1 →
가격 노출 규칙
할인가가 있으면 정가에 취소선을 긋고 할인가를 강조합니다.
이미지 영역
닫기
우클릭 property 메뉴

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

마커 일괄 생성 없는 항목만
마커 동기화 번호·상태 갱신
고아 마커 삭제 연결 끊긴 것
패널 폭 400 ~ 1000
팀 공유

팀원이 직접 쓰는 법

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

1

위젯 폴더를 로컬 디스크로 복사

최소 manifest.json + dist/code.js가 필요합니다. 배포용 폴더 C:\Projects\Description Panel을 통째로 받거나, Drive의 figma-desc-widget/를 각자 로컬 경로로 복사합니다.

2

Figma 데스크톱 앱에서 import

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

3

삽입

우클릭 → 위젯 → 개발 → Description Marker를 선택해 캔버스에 올립니다.

4

같은 id로 import가 거부되면

우클릭 → 위젯 → 개발 → 새로운 위젯…으로 빈 스캐폴드를 만든 뒤, 그 폴더의 dist/code.js를 우리 dist/code.js 내용으로 교체해 삽입합니다.

먼저 알아둘 원리

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