Joyuno's Dev Blog

2026-05-07 (목) 개발일지

dev-blog

오늘은 포트폴리오 UI 정제, 드롭쉬핑 자동화, 옵시디언 콘텐츠 정리, 사주 앱 UX 등 여러 프로젝트를 Claude와 함께 돌리며, 반복 피드백 루프의 프롬프팅 노하우를 다듬은 하루였다.

UI 반복 수정: “이전 상태 유지” 지시의 함정

포트폴리오에서 AboutSection.tsx, ProjectsSection.tsx 등을 수정하며 Claude에게 “이전 UI 그대로, 특정 섹션만 추가”라고 반복 지시했다. 처음엔 “테라시스 프로젝트 추가”만 했더니 전체 UI가 웹사이트처럼 변형됐다.

“ui 가 예전이랑 아예 바뀌었다고 지금도 그대로야 더 옛날 ui로 돌아가라니까”

잘 통한 점: 이미지 순서 지정 시 “1.png가 1번이야 너가 직접 이미지를 보고 파악해보렴”처럼 시각적 참조 + 번호 매김을 하니 순서가 정확히 맞춰졌다.

안 통한 점: “메일보내라는거랑 쓸데없는 ui 잔뜩 만들고”처럼 부정적 감정 프롬프트는 Claude가 방어적으로 응답해 수정 범위가 좁아졌다 — 3회 반복 후 긍정적 재지시로 전환해야 했다.

노하우:

  1. 변경 전/후 비교 표 제공: skills → career → projects 순서 스케치.
  2. 파일 리스트 upfront: Navigation.tsx, HeroSection.tsx 등 나열.
  3. 검증: “skills projects 사이에 career 만들어서”처럼 위치+내용 결합.

AI 한계: 이미지 인식은 좋지만, “포트폴리오가 아니라 웹사이트처럼” 같은 주관적 피드백은 무시 — 구체적 파일/섹션 지목이 핵심.

드롭쉬핑에서 page.tsx, footer.tsx 수정 중 “no products found” 이슈로 카테고리 재분류 요청. 메인페이지 상품 이미지 우선 노출을 강조했다.

“Shop by category 크기를 줄이던가 Trending right now 가 먼저 나와야하는거 아니냐고 … shop by category를 없애는건어때”

잘 통한 점: “현재 가져오는 상품들에 맞게 재구성” + 마케팅 텍스트 동시 수정 지시로 일관성 UP. notification.service.ts 알림 강화 시 Journal 페이지 이미지 안정화 잘 됐다.

안 통한 점: AliExpress 발주/DNS(Cloudflare) 문의는 일반론만 — 코드 스니펫 없이 “자동 발주 법 알려줘”는 실전 적용 어려움.

접근 결과 점수
카테고리 재구성 only no products 지속 4/10
+ 이미지 우선 + 마케팅 수정 메인 그리드 완성 9/10
+ “shop by category 없애” 레이아웃 최적 10/10

배운 점: UI 우선순위 리스트 (Trending → Reviews → Cats)로 프롬프트 시작. Claude는 sourcing.service.ts 같은 파일 컨텍스트 주면 분업 잘 함 — 나머진 직접 npx QA.

옵시디언/사주 콘텐츠: 중복 제거와 UX fallback

옵시디언 archive.html, arxiv_collector.py에서 중복 글/이미지 이슈, 사주 fortune_screen.dart에서 fallback 강화.

“미래글 진행하고 현재글도 다 수정해줘 그리고 현재글도 여전히 중복되는 글이 … 대표로 골라져있는데”

잘 통한 점: “사주적 검증 출력” (겁재 기운 설명)처럼 도메인 지식 예시 주니 신빙성 문구 생성 OK. 키워드 네트워크 클러스터링 지시로 시각화 개선.

안 통한 점: 아키텍처 이미지 API 조사(“arxiv pdf 안들어가도 첫 이미지”)는 “자료조사 해봐”만으로 불완전 — 구체 쿼리 + “oxa야” (캐주얼?)가 오히려 산만.

단계적 접근:

  1. 중복 제거: “다른 글 대표로 골라” → backfill_keywords.py 적용.
  2. 이미지: 책 페이지 클릭 흐름 복원 (book.html).
  3. UX QA: “날짜 클릭 에러 + 입력 유도” → 모든 흐름 검증.

AI 분업: Claude는 로직 제안 좋지만, git-trend 제목(arxiv 변화) 추적은 직접 python3 + gh 필요.

오늘의 한줄

프롬프트에 “현재 상태 + 구체 위치 + 시각 참조” 넣으면 반복 50% 줄고, 주관 피드백은 재구성 후 던지자 — Claude 컨텍스트 관리 UP.