세션별 작업 로그

Surveyor 프로젝트에서 실제로 주고받은 프롬프트와 Figma MCP 활용 내용을 세션별로 기록한다. 업데이트: 2026-03-10

핵심 요약

구분	내용
📖 세션 수	총 3회
💡 세션 1	초기 구조 → 아이콘 로컬 저장 → 팝업 5종 구현
🎯 세션 3	추가 팝업 2종 + 버그 수정 5건
⚠️ 패턴	프롬프트에 Figma URL/노드 ID를 포함할수록 정확도가 올라간다

1. 세션 1: 기반 구조 + 팝업 5종

1-1. Figma 연결 및 초기 구조 생성

프롬프트

https://www.figma.com/design/3N8raa5fKRNy5Lec4XGS5b/Untitled?node-id=1-5
피그마 연결해줘

작업 내용

get_design_context로 파일키 3N8raa5fKRNy5Lec4XGS5b, 노드 1:5 조회
전체 Frame 구조 파악:
- Header: 로고, 섹션 레이블, 도구버튼 4개, 지도버튼 4개, 모드토글, 사용자정보, 로그아웃
- Footer: 좌표변환, 위경도/좌표값, GPU Memory, 종단축척 슬라이더, Powered by
- Controls: 줌(+/-), 나침반(N/S/W/E + 로즈 이미지)
views/index.html, views/css/style.css, views/jsm/main.js 최초 생성
아이콘 17개 Figma 에셋 URL로 임시 참조

1-2. 아이콘 로컬 저장

프롬프트

이전에 작업하다가 중단되었는데 지금 헤더와 푸터 나침반과 + - 버튼이 만들어졌어!
근데 여기에 사용된 icon들이 figma에서 직접적인 링크로 연결되어있어!
claude.md 규칙에 따라 사용한 아이콘들을 피그마에서 다운로드 받아서
img폴더에 넣고 img 폴더로 img src를 변경해줘

작업 내용

Figma MCP get_design_context 재호출 → 최신 에셋 UUID 추출
아이콘 17개 views/img/ 폴더에 SVG로 다운로드
views/index.html 의 모든 Figma URL → ./img/파일명.svg 상대경로로 전환

이 시점부터 Figma CDN URL을 HTML에 직접 사용하지 않는 규칙이 확립됐다.

1-3. convertCoord_popup 구현

프롬프트

다음으로 작업할건 convertCoord_popup 창이야
footer의 좌표변환 버튼을 누르면 나오는 팝업창이고
위치는 피그마의 위치와 동일해야해!
라디오버튼 그룹은 2개로 위치표시 그룹에 하나 투영원점 그룹에 하나야!
위경도를 선택했을 때는 투영원점의 라디오버튼 그룹이 disable 처리가 되어야하고
토목좌표를 선택했을 경우에는 투영원점 라디오버튼 그룹이 선택이 되어야해!

작업 내용

항목	값
위치	`fixed; left: 0.75rem; bottom: 4.25rem`
크기	`width: 8.75rem; height: 17.5rem`
라디오 그룹	`locType` (위경도/토목좌표) + `projOrigin` (서부/중부/동부/동해)

위경도 선택 시 projOrigin fieldset disabled
토목좌표 선택 시 projOrigin 활성화
JS: onLocTypeChange(), toggleCoordPopup(), closeConvertCoordPopup()

1-4. projectList_popup 구현

프롬프트

다음으로 작업할건 projectList_popup이야
위치는 현재 피그마와 동일하고 프로젝트 검색 부분은 피그마와 동일하게 작업하면 되고
그 아래 프로젝트 리스트의 경우 db에서 들고오는 데이터를 바탕으로 만들어질 동적 데이터야!
우선 샘플로 2개정도만 너가 html을 작성해줘!
계양-강화 5공구  대산-당진 설계 3공구 이 두개의 프로젝트를 샘플로 만들어줘
그리고 각각의 프로젝트에는 오른쪽끝에 케밥 모양의 아이콘을 만들어줘

작업 내용

항목	값
위치	`fixed; left: 0.75rem; top: 4.25rem`
크기	`width: 17.5rem`

아이콘 추가 다운로드: close, search, close-small, add, more-vert, explore (6개)
검색창 + 프로젝트 리스트(동적) + 케밥 버튼 + 프로젝트 추가 버튼 구현
JS: filterProjects(), clearProjectSearch()

1-5. projectDetail_popup 구현

프롬프트

다음으로 작업할건 projectDetail_popup이야
이전 프롬프트에서 말했듯이 프로젝트리스트에서 프로젝트의 케밥 버튼을 누르면 생성되는 팝업창이야!
헤더에는 굵은글씨로 프로젝트 이름을 출력하고
내용 좌표계 작성자 수정일은 db에서 가져오는 동적 데이터야!
footer에는 삭제버튼 공유버튼 편집 버튼이 있어!

작업 내용

항목	값
위치	`fixed; left: calc(0.75rem + 17.5rem + 0.5rem)` (projectList 오른쪽)
top	JS로 케밥 버튼 클릭 위치 기반 동적 계산
footer 버튼	삭제(red) / 공유(gray) / 편집(blue)

아이콘 추가: mode-edit, share, arrow-up
JS: openProjectDetail(event, btn), closeProjectDetail()

1-6. projectEdit_popup 구현

프롬프트

다음으로 작업할건 projectEdit_popup이야
마찬가지로 제목과 내용 좌표계는 현재와 같은상태의 텍스트를 적어주면 되고 편집이 가능한 input 창이야.
우리의 약속인데 편집이 가능한 텍스트는 우리는 무조건 지금 projectEdit_popup의
제목과 내용 좌표계의 인풋창과 같은 색을 써 빨간색계열이야!
이 뜻은 편집이 가능하다 라는 뜻이야.

작업 내용

편집 가능 요소 컨벤션 확립: .--editable { color: var(--color-dahong); /* #FF3D00 */ }
위치: 화면 정중앙 (left: 50%; top: 50%; transform: translate(-50%, -50%))
제목 / 내용 / 좌표계 모두 빨간색 텍스트 input/textarea
JS: openProjectEdit(), closeProjectEdit(), applyProjectEdit()

1-7. basemapLayer_popup 구현

프롬프트

다음 작업할건 basemapLayer_popup인데
header에 배경지도 버튼을 눌렀을 때 나오는 팝업창이야
브이월드 구글 카르토의 모든 라디오 버튼이 하나의 그룹이야!
하나만 선택이 가능해

작업 내용

아이콘 다운로드 실패 (icon__map--gray.svg) → icon__map--white.svg + CSS filter 대체
위치: fixed; right: 0.75rem; top: 4.25rem
브이월드/구글/카르토를 단일 라디오 그룹 name="basemap"으로 묶음
JS: toggleBasemapPopup(btn), closeBasemapPopup()

1-8. 전체 감사 및 누락 항목 추가

프롬프트

전체적으로 모든 폰트종류 크기 색 icon 크기 색 모두 figma와 동일하게 만들어주고
지금 생략된게 footer의 500km 옆 축적바가 생략되었는데 scalebar_unit이야
이 축적바는 이후에 js로 동적으로 움직이게 만들꺼지만 일단 sample html이 필요하니까 작성해주고!
종단 축척에 2D부터 x5까지 가는 슬라이드바 아래 점 표시들과 x2 x3 x4 글씨가 빠졌어!

누락 항목 및 수정 내용

항목	내용
`scalebar_unit`	축척바 HTML 추가 (`.--scale-bar > .--track > .--fill`)
`z-scale_unit`	슬라이더 아래 dot 5개 + x2/x3/x4 레이블 추가
CSS 수치 오류	`.project-list__` top/width/background/border-radius 수정
onclick 오류	`toggleBtn(this)` → `toggleCoordPopup`, `toggleBasemapPopup`으로 교체

2. 세션 3: 추가 팝업 + 수정

2-1. surveyInfo_popup 구현

프롬프트

다음 작업할건 surveyModule_popup 이야 헤더 부분의 측정 팝업을 누르면 생성되는 창이야
피그마의 design_context를 가지고 정확하게 html로 작성해줘!
(URL: https://www.figma.com/design/3N8raa5fKRNy5Lec4XGS5b/Untitled?node-id=2-258)

작업 내용

항목	값
노드	`2:258` (surveyInfo_popup)
위치	`fixed; left: 50%; transform: translateX(-50%); top: 7.75rem`
크기	`width: 18.9375rem; height: 2.75rem`
디자인	글래스 pill (`backdrop-blur: 8px`, `border-radius: 18px`, `rgba(255,255,255,0.6)`)

아이콘: icon__mouse--left.svg, icon__mouse--right.svg
구조: 좌클릭(지정선택) + 우클릭(지정완료) + X버튼
JS: toggleMeasurementPopup(), closeSurveyInfoPopup()

2-2. 슬라이더 value 10개로 변경

프롬프트

footer에 작성했던 종단축척의 slider의 value 개수를 10개로 해줘

작업 내용

<input type="range" max="5" → max="10"
JS labels 배열: ['2D', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7', 'x8', 'x9', 'x10']

2-3. 바운더리 아이콘 width/height 반전 수정

프롬프트

header부분의 바운더리의 icon이 figma와 달라! 확인해줘

원인 및 해결

Figma 원본: width: 14.397px, height: 12.957px
기존 HTML: width: 0.8125rem; height: 0.9rem → width↔height 반전 오류
수정: width: 0.9rem; height: 0.8125rem

2-4. modeModule 3D/2D 토글 수정

프롬프트

다음은 header에 만들어놓은 모드 3D/2D 수정이 필요해
figma에서는 modeModule 그룹이야!
정확하게 반을 나누는게 아니라 서로 영역을 조금씩 침범하는 둥근 네모 박스야!
figma의 design_context를 이용해서 만들어!

원인 및 해결

기존: 부모에 overflow: hidden → 버튼이 직선으로 잘림
Figma 구조: 각 버튼이 독립적으로 border-radius: 12px 유지

/* 수정 전 */
.--mode-toggle { overflow: hidden; }
 
/* 수정 후 */
.--mode-toggle { /* overflow 제거 */ }
.--mode-toggle > .--mode-btn { border-radius: 0.75rem; }

2-5. 편집 버튼 아이콘 빈 파일 문제

프롬프트

다음 수정사항은 figma에서 projectDetail_popup그룹이야 편집 버튼의 icon이 색상이 잘못나왔어

원인 및 해결

icon__mode-edit--gray.svg가 base frame SVG → <g id="Vector"></g> (경로 없음)
inner 레이어 UUID로 실제 연필 path 데이터 다운로드
icon__mode-edit-body--gray.svg로 교체

2-6. surveyModule_popup 구현

프롬프트

surveyModule_popup 구현이 안되어있어! 측정버튼을 눌렀을때 surveyInfo_popup과 같이
생성되는 창이야! figma design_context대로 정확하게 작성해주고!
surveyinfo_popup의 x 표시가 창 밖으로 나가있어! 피그마와 동일하게 수정해줘

surveyModule_popup 작업 내용

항목	값
노드	`4:2` (surveyModule_popup)
위치	`fixed; left: 50%; transform: translateX(-50%); top: 4.25rem`
크기	`width: 34.5625rem; height: 2.75rem`

버튼 5종: 좌표 / 직선거리 / 지면거리 / 면적 / 반경
반경 버튼: base + inner SVG를 position: absolute로 겹쳐 합성 아이콘 구현
모든 측정삭제 버튼: margin-left: auto로 우측 정렬, --color-dahong 색상
JS: selectSurveyMode(btn) — radio-style 단독 선택

surveyInfo_popup X버튼 위치 수정

원인: margin-left: 1.5rem이 flex 레이아웃에서 버튼을 팝업 밖으로 밀어냄
해결: position: absolute; right: 0.8125rem; top: 50%; transform: translateY(-50%)

2-7. surveyInfo_popup 그룹 간격 수정

프롬프트

surveyinfo_popup의 지정 완료랑 x랑 너무 붙었어
figma의 surveyinfo_popup의 속성값들을 잘 읽고 배치해!

원인 및 해결

Figma 실측: 두 그룹 사이 간격 16px = 1rem
기존: margin-left: 1.5rem (24px) → 8px 초과

/* 수정 전 */
.survey-info-popup__ > .--group + .--group { margin-left: 1.5rem; }
 
/* 수정 후 */
.survey-info-popup__ > .--group + .--group { margin-left: 1rem; /* 피그마 실측 16px */ }

문서 탐색

이전	다음
3.1 Surveyor 실전 적용기	—

JW's AI_Stash

Explorer

3.2 세션별 작업 로그

세션별 작업 로그

핵심 요약

목차

1. 세션 1: 기반 구조 + 팝업 5종

1-1. Figma 연결 및 초기 구조 생성

1-2. 아이콘 로컬 저장

1-3. convertCoord_popup 구현

1-4. projectList_popup 구현

1-5. projectDetail_popup 구현

1-6. projectEdit_popup 구현

1-7. basemapLayer_popup 구현

1-8. 전체 감사 및 누락 항목 추가

2. 세션 3: 추가 팝업 + 수정

2-1. surveyInfo_popup 구현

2-2. 슬라이더 value 10개로 변경

2-3. 바운더리 아이콘 width/height 반전 수정

2-4. modeModule 3D/2D 토글 수정

2-5. 편집 버튼 아이콘 빈 파일 문제

2-6. surveyModule_popup 구현

2-7. surveyInfo_popup 그룹 간격 수정

문서 탐색

Graph View

Table of Contents

Backlinks