Photo Frame Maker — 2026년 3월 1일
12 files+1455-128
Photo Frame Maker 프로젝트에서 모바일 UX를 대폭 개선하는 작업을 완료했습니다. 이번 업데이트의 핵심은 모바일 환경에서의 레이아웃 안정성과 직관적인 인터페이스 개선이었습니다. 세로 비율(9:16, 2:3 등) 선택 시 발생하던 프리뷰 컨테이너 정렬 문제를 해결했고, 썸네일 목록이 캔버스를 가리던 문제를 flexbox 구조 개편으로 완전히 제거했습니다. 특히 '사진' 토글 버튼을 통해 모바일 사용자가 프리뷰 화면을 최대화할 수 있도록 개선해, 한정된 화면 공간을 훨씬 효율적으로 활용하게 되었습니다.
인스타그램 피드/프로필 미리보기 기능도 함께 다듬었습니다. 피드 모드에서 좌우 화살표와 스와이프 네비게이션을 추가하고, 프로필 모드의 썸네일 배치를 좌상단으로 이동시켜 실제 인스타그램 사용 환경에 더 가깝게 만들었습니다. 다크모드 지원까지 추가되어 사용자의 시스템 설정에 맞춘 일관된 경험을 제공하게 되었습니다.
Claude AI와의 협업을 통해 이 모든 개선사항들을 빠르게 구현할 수 있었습니다. 각 레이아웃 이슈에 대해 전략적으로 접근하고, 반복적인 CSS 조정과 이미지 렌더링 모드 최적화(contain/cover 전환)를 효율적으로 진행했습니다. 12개 파일의 변경으로 1,455줄을 추가하면서 사용자 경험 측면에서 정량적인 개선을 이루어낼 수 있었던 만큼, 다음 단계에서는 더 고도화된 필터 기능 추가를 검토 중입니다.
커밋 기록
docs: DevNote/PromptLog 3/1 작업내용 전체 업데이트
13:39Merge pull request #53 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
13:03fix: 모바일에서 세로 비율(9:16 등) 선택 시 프리뷰 컨테이너 왼쪽 정렬 문제 수정
13:02Merge pull request #52 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:47fix: 프리뷰 컨테이너 CSS에 margin: 0 auto 추가하여 중앙 정렬 보장
12:43Merge pull request #51 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:42feat: 모바일에서 사진 없을 때 사진 탭 클릭 시 바로 파일 선택 실행
12:41Merge pull request #50 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:40fix: 세로 비율(9:16, 2:3) 선택 시 프리뷰 컨테이너 중앙 정렬
12:39Merge pull request #49 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:36fix: 인스타 게시물 라벨을 4:5에서 3:4로 이동
12:36Merge pull request #48 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:34fix: 프로필 피드 썸네일 비율을 1:1에서 3:4로 변경
12:30Merge pull request #47 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:27fix: 모바일 프리뷰 영역의 썸네일 중복 노출 제거
12:27Merge pull request #46 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:23fix: 모바일 썸네일을 사진 탭 패널 안으로 이동
12:22Merge pull request #45 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:16refactor: 모바일 썸네일 목록을 하단 '사진' 탭으로 토글
12:13perf: 이미지 슬라이드 네비게이션 속도 최적화
12:07Merge pull request #44 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
12:00feat: 모바일 썸네일 목록을 '사진' 토글 버튼으로 접기/펼치기
11:57Merge pull request #43 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
11:53fix: 모바일 피드/프로필 모드 썸네일 겹침 - flexbox로 전환
11:51fix: 피드/프로필 모드에서 썸네일이 목업을 가리는 문제 수정
11:41Merge pull request #42 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
11:35fix: 모바일 썸네일이 캔버스를 가리는 문제 수정
11:34Merge pull request #41 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
11:27fix: 이미지 렌더링을 contain 모드로 변경 (사진 전체 표시)
11:26Merge pull request #40 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
10:00feat: 모바일 썸네일 5열 그리드 레이아웃
09:58Update index.html
09:57Merge pull request #39 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
09:54fix: 모바일 다중 이미지 업로드 시 레이아웃 깨짐 수정
09:53fix: 다중 이미지 로딩 시 파일 순서 보존
09:40Merge pull request #38 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
09:18docs: About/DevNote/PromptLog 페이지 3/1 작업내용 업데이트
09:18Revise description of Photo Frame Maker tool
09:17Merge pull request #37 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
09:14Update photographer link in about.html
09:13feat: 피드 모드 좌우 화살표/스와이프 네비게이션, 프로필 모드 좌상단 배치
09:12Merge pull request #36 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:53refactor: SEO 콘텐츠를 /about.html로 분리, 푸터에 링크 추가
08:52Merge pull request #35 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:48feat: 인스타그램 피드/프로필 미리보기 다크모드 지원
08:47Merge pull request #34 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:45add vercel.json for static site deployment
08:44fix: 썸네일 스트립 text-align:center + inline-flex로 확실한 가운데 정렬
08:42Merge pull request #33 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:37fix: 썸네일 리스트 max-width: fit-content로 가운데 정렬 보장
08:36Merge pull request #32 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:34fix: 썸네일 스트립 가운데 정렬 수정 (카운터를 absolute로 분리)
08:33Merge pull request #31 from nohdaeyoung/claude/image-framing-webapp-G6Kaj
08:31merge: resolve index.html conflict (keep both GTM and gtag)
08:30style: 썸네일 크기 25% 확대 (52→65px, 모바일 48→60px)
08:22fix: 이미지 드래그 위치조정 기능 수정 (contain → cover)
08:20Center-align thumbnail strip below canvas
08:11fix: 데스크톱에서 다운로드 시 Share Sheet 대신 파일 직접 다운로드
07:24Update index.html
04:22feat: GTM, GA4, 네이버 서치어드바이저 태그 추가
03:43feat: SEO/GEO 전략 전면 적용
03:35