v2.35change journal

POP-SPOT v2.35 — 로고 뒤 상단 블러 헤이즈 — 밝은 라이트 영상의 도심 불빛 번쩍임 진정

김동현180
#백엔드#프론트엔드#회고#트러블슈팅
v2.35 릴리즈에 포함된 Git 기록을 빠짐없이 펼친 기술 기록이다. 전문 용어는 바로 풀어 쓰고, 바뀐 모든 코드 줄을 Before → After로 비교했다.

먼저 쉽게 설명하면

로고 뒤 상단 블러 헤이즈 — 밝은 라이트 영상의 도심 불빛 번쩍임 진정 작업이 중심이다. 이 릴리즈는 눈에 보이는 결과뿐 아니라 그 결과를 만든 파일과 코드까지 모두 추적했다.

읽는 법

  • Before는 바뀌기 전 줄이다.
  • After는 바뀐 뒤 줄이다.
  • ‘해당 코드 없음’은 새로 추가했거나 완전히 지운 구간이라는 뜻이다.
  • 영상·이미지처럼 글자로 비교할 수 없는 파일은 Git의 추가·수정·삭제 상태로 기록했다.
  • Git 기준 범위

  • 릴리즈: v2.35
  • 기준 날짜: 2026-07-11
  • 커밋: 11개
  • 파일 변경 기록: 35개
  • 추가한 줄: 751줄
  • 삭제한 줄: 225줄
  • 검증 ID: 533bd04ef50d26ba30746deb60dc1df3be39faaf03f836513aa210c8424c1c9b
  • 기준 커밋: 94dc6c83eb30

  • 커밋 9489a70 — fix(커버): 모든 팝업에 서로 다른 큐레이션 사진 배정 (나이키 기본 이미지 교체)변경 파일 7

    GitHub에서 이 커밋 보기

    쉬운 설명: 모든 팝업에 서로 다른 큐레이션 사진 배정 (나이키 기본 이미지 교체) 작업이다.

    바꾼 이유: - 백엔드가 모든 팝업에 동일한 기본 이미지(Unsplash 나이키 운동화 한 장)를 imageUrl 로 내려주어 전 화면의 팝업 커버가 똑같이 나오던 문제. - popupCover.ts 신설: 진짜 사진(그 기본값이 아닌 URL)이면 그대로, 없거나 기본 플레이스홀더면 카테고리·id 해시로 결정적 배정한 얼굴 없는 큐레이션 스톡 사진(Pexels, 상업 무료·출처 불필요). → 모든 팝업이 사진을 갖고, 서로 다르며(같은 팝업은 항상 같은 사진), 카테고리 무드에 맞음. 미래 수집 팝업에도 자동 적용. - 커버 렌더 7곳 통일: PopupCard(랭킹·음악·홈 레일), 팝업 상세 히어로, 여권 스탬프, MY 찜, 최근 방문, 홈 랭킹 히어로, 전역 음악 플레이어. - 카테고리별 ~8-15장, 전부 실제 로드(HTTP 200) 확인된 Pexels ID. 프로덕션 빌드 통과.

    파일 수: 7개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/app/popup/[id]/page.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 3. popspot-frontend/src/components/Passport/PassportView.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 4. popspot-frontend/src/components/main/HomeBento1a.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 5. popspot-frontend/src/components/main/PopupCard.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 6. popspot-frontend/src/components/music/GlobalMusicPlayer.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 7. popspot-frontend/src/lib/popupCover.ts

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 8f2ba5a — fix(검색): 검색 결과 선택 시 지도가 그 팝업으로 이동 + 검색 결과에 사진변경 파일 3

    GitHub에서 이 커밋 보기

    쉬운 설명: 검색 결과 선택 시 지도가 그 팝업으로 이동 + 검색 결과에 사진 작업이다.

    바꾼 이유: - 버그: 검색은 Algolia, 지도 마커는 /api/map/markers, 클릭 시 좌표는 /api/popups(allPopups)에서 조회하는 3중 분리 구조. Algolia 레코드에 좌표가 없어 allPopups 조회에 의존했는데, 지도(findAllVisible)와 allPopups(findAllPublic) 쿼리가 달라 어긋나거나 좌표 null 이면 setMapCenter 가 안 불려 지도가 안 움직였다("그 쪽으로 안 나옴"). - 해결: InteractiveMap 에 focusReq prop 추가 → 검색 선택 시 지도가 '자기 마커(allMarkers)'에서 해당 팝업을 직접 찾아 panTo + 정보창 오픈(allPopups/Algolia 좌표 의존 제거). nonce 로 같은 팝업 재검색도 매번 반응. 마커가 아직 안 실렸으면 로드 후 재시도. allPopups 좌표는 보조로 유지. - 검색 결과 썸네일: Store 아이콘 대신 popupCoverUrl 커버 사진(기본 플레이스홀더면 카테고리·id 큐레이션 사진으로 변환). AlgoliaHit 에 category/imageUrl 필드 추가. - 참고: 신뢰도 0.8 미만은 수집 시 PENDING 으로 빠지고 isPublic/isVisibleHit 이 걸러 이미 ≥0.8 만 노출됨(지도·검색 공통, 미래 수집분 포함).

    파일 수: 3개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/src/components/Map/InteractiveMap.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 3. popspot-frontend/src/features/popup/SearchBox.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 aec7976 — feat(사진): Pexels 커버 연동 — 팝업 이름/카테고리로 각기 다른 사진 자동 배정변경 파일 7

    GitHub에서 이 커밋 보기

    쉬운 설명: Pexels 커버 연동 — 팝업 이름/카테고리로 각기 다른 사진 자동 배정 작업이다.

    바꾼 이유: - 원인: PopupStore.getImageUrl() 이 PopupImage 없으면 단일 기본 이미지(나이키)로 떨어져 전 팝업 커버가 같았다. - PexelsPhotoService: 팝업 이름 키워드(베이글→bakery, 커피→cafe 등)/카테고리를 영어 쿼리로 바꿔 Pexels 검색, 팝업 id 로 페이지·인덱스를 결정적 선택 → 팝업마다 다른 사진(같은 팝업은 항상 같은 사진). 사람 최소화를 위해 interior/product 위주로 편향(단 동적 검색이라 얼굴 100% 배제는 불가). - PopupPhotoService.backfillMissingPhotos: 이미지 없는 공개 팝업에 Pexels 커버를 PopupImage(mainYn=Y)로 붙임. PopupImageRepository.insertMainImage 네이티브 INSERT(관계 cascade 없음 대응). - 신규 수집분 자동 반영: PopupCrawlScheduler 에 커버 백필 @Scheduled 추가(매일 04:45 KST). - 관리자 수동 트리거: POST /api/admin/popups/backfill-photos + 팝업 관리 탭 '팝업 사진 채우기' 버튼. - 설정: pexels.api-key(이미 존재) 는 PEXELS_API_KEY 환경변수로. photo.backfill-cron/limit 추가. - 방어적: 키 미설정/호출 실패 시 스킵(기존 fallback 커버 유지). 프론트 popupCover 가 여전히 2차 안전망. - 주의: 백엔드는 로컬 gradle 테스트 불가 — 배포 시 검증 필요.

    파일 수: 7개이다.


    파일 1. popspot-backend/src/main/java/com/example/popspotbackend/controller/AdminController.java

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-backend/src/main/java/com/example/popspotbackend/repository/PopupImageRepository.java

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 3. popspot-backend/src/main/java/com/example/popspotbackend/service/PexelsPhotoService.java

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 4. popspot-backend/src/main/java/com/example/popspotbackend/service/PopupPhotoService.java

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 5. popspot-backend/src/main/java/com/example/popspotbackend/service/crawler/PopupCrawlScheduler.java

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 6. popspot-backend/src/main/resources/application.properties

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 7. popspot-frontend/app/admin/page.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 93de546 — @변경 파일 1

    GitHub에서 이 커밋 보기

    쉬운 설명: @ 작업이다.

    바꾼 이유: fix(커버): 카테고리별 큐레이션 풀 대폭 확장 (중복 감소)

    파일 수: 1개이다.


    파일 1. popspot-frontend/src/lib/popupCover.ts

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 f78d0df — fix(커버): 큐레이션 풀 총 ~285장으로 확장 (카테고리별 33~51장)변경 파일 1

    GitHub에서 이 커밋 보기

    쉬운 설명: 큐레이션 풀 총 ~285장으로 확장 (카테고리별 33~51장) 작업이다.

    바꾼 이유: - 카테고리 풀을 다시 확장(총 ~177 → ~285장). 151개 규모에선 카테고리당 팝업(~20개)보다 풀(33~51장)이 훨씬 커서 사실상 중복 0. - 새 ID 전부 실제 로드(HTTP 200) 확인된 얼굴 없는 인테리어/제품/전시 컷. - 한계: 고정 풀이라 2000개/카테고리당 수백 개 규모에선 결국 겹치고 이름 맞춤도 불가 — 그 규모의 완전 유니크+이름맞춤은 Pexels API(백엔드 이미 구현) 배포로만 해결됨.

    파일 수: 1개이다.


    파일 1. popspot-frontend/src/lib/popupCover.ts

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 d0f6abc — fix(피드백): 탭 스크롤·다크 배경·반투명 카드·라벨 대비·서치존 여백·로그인 배경변경 파일 3

    GitHub에서 이 커밋 보기

    쉬운 설명: 탭 스크롤·다크 배경·반투명 카드·라벨 대비·서치존 여백·로그인 배경 작업이다.

    바꾼 이유: - 탭 전환 시 항상 상단부터: handleTabChange 에 window.scrollTo(top:0) 추가. (아래로 스크롤한 상태에서 여권/동행 등을 누르면 하단이 먼저 보이던 문제) - 다크모드 배경 가시성: 비디오 오버레이 dark:bg-black/80 → /55 (야경이 보이도록). - 반투명 카드 → 불투명: 히어로(bg-white/60→white), OOTD(bg-white/80→white) 카드 solid 처리. - 라벨 대비/크기(색약·고령자): 지역별 보기·달력 보기 text-primary → lime-600/400 + bold + 크게, 오늘의 스타일 라벨 lime-700/300 + 배경칩 + 크게, 보조 라벨 gray-400 → gray-500. - 모바일 서치존 하단 빈 여백 제거: min-h-[260px] → min-h-0 (내용 높이만큼). - 로그인 배경 영상 통일: login-bg.mp4 → 메인과 동일한 bg.mp4.

    파일 수: 3개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/app/login/page.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 3. popspot-frontend/src/features/popup/SearchBox.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 05154a8 — redesign(첫인상): 게스트 히어로를 팝업 사진 쇼케이스로 + 지도 상세버그·모바일 푸터변경 파일 3

    GitHub에서 이 커밋 보기

    쉬운 설명: 게스트 히어로를 팝업 사진 쇼케이스로 + 지도 상세버그·모바일 푸터 작업이다.

    바꾼 이유: - 첫인상/이탈 개선: 로그인 유도 텍스트 히어로 → "지금 서울에 N개 열렸어요" + 팝업 사진 4장 클러스터(클릭 시 상세) + '지도에서 둘러보기'(탐색 우선)·회원가입(보조). 들어오자마자 볼거리 노출. - 칙칙함 완화: 밝은 표면 + 은은한 라임 글로우. 라임은 채우기=라임+검은글씨(고대비), 숫자=lime-600/300(밝으면서 읽히게)로 "너무 밝아 안 보이던" 문제 회피. - 지도 상세 버그 수정: 선택 오버레이 clickable=true + '상세 보기'를 명시적 버튼(stopPropagation)으로. (클릭이 아래 마커/지도로 흘러 재선택만 되고 상세로 안 가던 버그) - 모바일 푸터 확대: 안내문 text-xs → text-sm(md 이상은 유지), 운영정보 10px → xs.

    파일 수: 3개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/src/components/Map/InteractiveMap.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 3. popspot-frontend/src/components/layout/Footer.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 5c6e1a8 — @변경 파일 1

    GitHub에서 이 커밋 보기

    쉬운 설명: @ 작업이다.

    바꾼 이유: redesign(배경): 비디오를 상단 히어로 배경으로만 + 아래는 깔끔한 단색 (짜침 근본 제거)

    파일 수: 1개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 39dcc4c — redesign(배경): 목업대로 배경 시스템 전면 교체 (비디오 → 딥잉크/웜크림 + 오로라 + 그레인 + 시네마틱 스카이)변경 파일 2

    GitHub에서 이 커밋 보기

    쉬운 설명: 목업대로 배경 시스템 전면 교체 (비디오 → 딥잉크/웜크림 + 오로라 + 그레인 + 시네마틱 스카이) 작업이다.

    바꾼 이유: - 사장님 목업("홈 배경 적용 라이트·다크") 그대로 구현. 비디오+반투명 카드로 '짜치던' 구조를 근본 제거. - 원칙: 순색 금지(딥잉크/웜크림) · 브랜드 앰비언트 틴트(라임·핑크·보라) 은은 · 미세 그레인 한 겹 · 시네마틱 스카이 히어로 · 라임 포인트 유지. 라이트=다크의 반전이 아니라 같은 규칙을 밝게. - globals.css: home-canvas(다크 #0b0d12 / 라이트 #f6f2ea + 오로라), home-grain-layer(그레인), home-sky(다크 야경 / 라이트 노을 그라디언트 + 별빛), home-sky-overlay(하단 본문색 페이드). - HomeClient: 전체 고정 비디오 제거 → home-canvas + 그레인 레이어 + 상단 스카이 히어로(56vh). - computed style로 라이트/다크 색·오로라·스카이 모두 목업과 일치 확인. - 후속: HomeBento1a 등 '항상 다크' 카드를 목업의 테마대응(라이트=흰 카드 / 다크=#15171f) 으로 맞추면 완성.

    파일 수: 2개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/app/globals.css

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    커밋 1132350 — redesign(배경): 영상 배경 복귀 — 모드별(라이트=밝은 스카이라인/다크=서울 야경) + 카드 테마 대응변경 파일 5 · 자동 생성·보조 1개

    GitHub에서 이 커밋 보기

    쉬운 설명: 영상 배경 복귀 — 모드별(라이트=밝은 스카이라인/다크=서울 야경) + 카드 테마 대응 작업이다.

    바꾼 이유: - 방향 재전환: 그라디언트/오로라 배경(39dcc4c)이 밋밋 → 영상 풀 배경으로 복귀하되 모드별 분리. - 라이트: light-bg.mp4(212404 0~5초 부메랑 재인코딩, 끝↔시작 매끄러운 10초 루프) + 0.5배속. 기존 212404 원본은 두스크→야경 타임랩스라 루프가 뚝 끊기고 도심 불빛이 번쩍여 정신 사나웠음 → 가장 밝은 앞구간만 부메랑으로 이어 밝기 유지 + 리셋 제거, 0.5배속으로 반짝임 진정. - 다크: login-bg.mp4(밝은 서울 야경, 16MB)로 교체 — 기존 bg.mp4(93MB)가 너무 어두워 '나이트모드인데 배경 넣은 의미 없음' 원인이었음. 야경이 헤더 뒤로 또렷이 보이게 + 용량 대폭↓. - 스크림: 영상이 '실제로 보이도록' 얕게. 라이트는 로고 상단만 강화해 번쩍임 진정, 중앙은 투명. - 카드 테마 대응: 실시간 랭킹·나의 기록·같이 갈 사람(HomeBento1a)·코스(FeatureSections)를 라이트=흰 카드+진한 글씨(라임/앰버/스카이 액센트도 라이트 대비), 다크=기존 딥카드 유지. 밝은 라이트 영상 위에서 검게 튀던 문제 해결, 히어로·서치존과 통일. - next-themes resolvedTheme로 모드별 영상 1개만 로드(깜빡임 없이 페이드 인). 프로덕션 빌드 통과.

    파일 수: 5개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/app/globals.css

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 4. popspot-frontend/src/components/main/FeatureSections.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 5. popspot-frontend/src/components/main/HomeBento1a.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    자동 생성·보조 파일 1개 — Git 대조 기록
    파일 3. popspot-frontend/public/light-bg.mp4 — 새 파일
    Git 이력 대조에는 포함했다. 도구가 자동으로 만들거나 사람이 직접 읽기 어려운 파일이라 본문 코드 비교에서는 접었다.
    커밋 94dc6c8 — fix(배경): 로고 뒤 상단 블러 헤이즈 — 밝은 라이트 영상의 도심 불빛 번쩍임 진정변경 파일 2

    GitHub에서 이 커밋 보기

    쉬운 설명: 로고 뒤 상단 블러 헤이즈 — 밝은 라이트 영상의 도심 불빛 번쩍임 진정 작업이다.

    바꾼 이유: - 라이트 배경 영상(밝은 스카이라인)의 도심 불빛이 헤더/로고 위에서 어른거려 정신 사나웠음. - 상단 h-32/40 에 backdrop-blur-xl(24px) 한 겹을 얹어 움직이는 불빛을 부드러운 글로우로 뭉갬. - 아래로 mask 페이드 → 영상 본체(중앙·좌우·하단)는 그대로 선명하게 보임. - 블러는 Tailwind 유틸(backdrop-blur-xl)로 적용 — raw CSS의 backdrop-filter 는 Lightning CSS가 드롭해서(마스크만 남음) 유틸로 넣어야 정상 컴파일됨. 라이트/다크 공통(로고 가독성 보강).

    파일 수: 2개이다.


    파일 1. popspot-frontend/app/HomeClient.tsx

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    파일 2. popspot-frontend/app/globals.css

    파일 전체 문맥

    조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

    공유XLinkedIn

    댓글