Projects About

Claude Code 19세션 604 tool calls: AI 느낌 없는 포토그래퍼 사이트 리디자인

· portfolio-site · 0
#claude-code#frontend#design#iteration#daymoon

2026-05-13 하루, Claude Code 19세션 604번 도구 호출, 총 약 50분. 작업 대상은 daymoon-pic-site — 사진작가 Daymoon의 포트폴리오 사이트다.

TL;DR 첫 번째 리디자인은 “AI 느낌”으로 즉시 거부됐다. 두 번째 시도부터 실제 상업 사진가 사이트 수준에 수렴했고, 이후 15개 세션은 슬라이드쇼·언어 톤 같은 디테일 다듬기에 썼다.

리디자인 이전 — 인트로 애니메이션과 드로어 정리

세션 36은 큰 방향 전환 없이 소폭 수정들이었다. 필기체 로고 인트로 애니메이션 구현(script.js FLIP morph), 모바일 드로어 중복 DM 버튼 제거, Pretendard 폰트 통일, 타이포그래피 레터스페이싱 조정. 세션당 4354번 tool calls를 쓰면서 styles.css, index.html, script.js를 반복 수정했다.

특히 세션 3에서 FLIP transition 구현이 제일 복잡했다. 필기체 wordmark가 화면 중앙에서 쓰여진 뒤, 헤더 로고 위치로 날아가는 흐름이었는데 — CDP 검증 스크립트(/tmp/verify_intro_flip.py)까지 만들어서 body 클래스 전이(intro-active → intro-morphing → intro-done)와 좌표값을 확인했다. 세션 하나에 Read 13번, Edit 10번, Bash 9번이 들었다.

”다시해” — 첫 리디자인 방향 거부

세션 7에서 처음으로 전면 리디자인 요청이 왔다. 피드백은 직접적이었다.

"다시해 제대로 상업적인 디자인 폰트 / 레이아웃 / 사진이 최대한 여러장 보이는 구조로
상품성있게 웹 / 앱 모두 고려해서"

이전까지 만들어온 필기체 인트로, 감성 문구 레이아웃이 “AI/generic”으로 거부됐다. 세션 8~9에서 ui-ux-pro-max 스킬을 불러 dense editorial 레이아웃을 설계했다. 5열 contact-sheet 그리드, 제품 탭 스트립, 모바일 고정 DM 바. styles.css를 통째로 새로 썼다.

세션 9에서는 그리드에 넣을 실제 파일명을 먼저 Bash로 확인했다 — assets/blog/ 카테고리별 폴더를 열어 존재하는 파일만 HTML에 박았다. 없는 경로를 쓰면 깨지는 게 당연하지만, 이걸 처음부터 확인하는 습관이 생산성 차이를 만든다.

슬라이드쇼 전환 — contact-sheet 전체를 교체하다

세션 10에서 히어로 마케팅 카피(사진을 먼저 보고, 졸업 · 커플 · 우정 · 웨딩 / 상품 보기)를 전부 날리고, 5열을 3열로 줄였다. 그러다 세션 11에서 완전히 다른 방향이 나왔다.

"홈은 그냥 큰 사진 하나가 랜덤으로 페이드인 페이드아웃으로 다음 사진으로 넘어가는 이미지로 해줘"

contact-sheet 그리드를 버리고 전체 화면 슬라이드쇼로 교체했다. script.js에 rotation 로직 추가, styles.css에 .home-slideshow 추가. 이 세션이 64번으로 가장 많은 tool calls를 기록했는데, Bash가 27번으로 압도적이었다 — CDP 기반 QA 검증을 같은 세션에서 돌렸기 때문이다.

세션 13에서 슬라이드쇼 프레임을 전체 bleed에서 편집 포털 스타일로 바꿨다.

.home-slideshow {
  width: min(760px, calc(100% - 28px));
  height: clamp(520px, 78svh, 860px);
  margin: 0 auto;
}

이 세션에서 Stop hook 오탐이 한 번 발생했다. WORKLOG에 “console.log·debugger·TODO 0건”이라고 썼더니 훅이 “TODO 발견”으로 감지해서 응답을 차단했다. “디버그/잔존 마커 0건”으로 문구를 바꿔서 통과했다. 훅은 context를 모른다 — 패턴만 본다.

Product 페이지 언어 결정이 4번 바뀌었다

세션 14~18이 전부 product 페이지 언어 톤 문제였다.

세션 14에서 영어로 통일했다(Product, Graduation, Couple 탭). 세션 15에서 한국어로 뒤집었다(촬영 메뉴, 졸업스냅, 커플스냅). 세션 16~17에서 페이지 네비까지 한국어로 밀었다. 세션 18에서 “ONLY 콘텐츠만 한국어”로 확정하며 네비는 영어로 복구했다.

최종 상태: 사이트 공통 네비(Gallery / Product / Contact / DM)는 영어, product 페이지 내 콘텐츠(촬영 메뉴, 탭, 패널, 문의하기)는 한국어.

이 과정에서 Edit 도구 호출이 세션당 15번씩 쌓였다. 같은 파일을 앞뒤로 수정하는 이터레이션이 Claude Code에서 어떻게 처리되는지 잘 드러난다 — 이전 상태를 별도로 알려주지 않아도 Read로 현재 상태를 확인하고 필요한 diff만 적용한다.

도구 사용 패턴

19세션 604번 tool calls 분포:

  • Bash 193번 — 검증, git diff, 파일 목록 확인
  • Read 172번 — 세션마다 관련 파일 재확인
  • Edit 141번 — 실제 변경
  • Grep 59번 — 클래스/문자열 위치 탐색
  • TodoWrite 17번 — 단계별 체크리스트

Read가 Edit보다 31번 더 많다. 컨텍스트가 세션마다 리셋되는 구조에서 Claude Code는 변경 전 항상 현재 파일 상태를 확인하는 패턴을 유지한다. 세션 간 연속성 없이도 일관된 결과가 나오는 이유다.

세션당 평균 tool calls는 32번, 평균 시간은 약 2.6분이다. 가장 긴 세션(세션 11)이 64번, 가장 짧은 세션이 5번이었다.

뭘 배웠나

“AI 느낌을 피해달라”는 요청만으로는 방향이 안 잡힌다. 세션 7 프롬프트처럼 “상업적인 디자인 폰트 / 레이아웃 / 사진이 최대한 여러장 보이는 구조”로 구체적으로 써야 첫 결과물의 품질이 달라진다. 추상적인 피드백은 이터레이션 횟수를 늘린다.

언어 톤 결정은 코드가 아니라 제품 결정이다. 세션 14~18의 왔다갔다는 구현 실패가 아니라 UX 방향 탐색이었다. Claude Code는 실행 도구고, 결정 자체는 사람이 한다. 이 구분을 명확히 하면 이터레이션이 많아도 낭비라고 느끼지 않는다.

패턴 매칭 기반 훅은 오탐이 난다. Stop hook의 TODO 감지처럼, 의도와 무관하게 문자열이 일치하면 차단된다. 훅 정규식을 단어 경계(\bTODO\b)로 좁히면 해결된다.

Comments 0

0 / 1000