UI / UX Design
React 웹 개발
제가 만든 사이트는 단순 홍보용 페이지가 아니라 관리자 시스템까지 포함된 서비스입니다. 관리자/매니저가 다양한 계정을 생성·운영할 수 있고, 권한/역할 기반 접근 제어를 Java 기반 토큰(JWT)으로 구현했습니다. 계정별로 전용 로고와 UI가 자동 적용되어 브랜드별로 화면이 개별 렌더링됩니다. 예를 들어 Postburger의 경우 지점 로고와 Google Analytics가 연동되어 일자별 방문자 수·유입 경로 등 핵심 지표를 대시보드에서 확인할 수 있으며, 가맹/제휴를 희망해 남긴 문의(리드)도 해당 브랜드의 전용 대시보드에 자동 수집되어 신속한 후속 대응이 가능합니다. 프랜차이즈 비즈니스에 최적화된 멀티테넌트 구조를 채택해 운영 효율과 확장성을 함께 확보했습니다. NDA 준수로 실제 내부 대시보드는 공개할 수 없으며, 본 이미지는 브랜드 미노출·가상 데이터 데모입니다.
문제점 :
토큰 구조(권한·만료·클레임) 설계가 예상보다 까다로웠다.
관리자 페이지와 랜딩 페이지를 같은 도메인에 둘 필요가 없다는 점을 뒤늦게 인지해 초기 배포 전략이 비효율적이었다.
네이버 검색 등록 과정에서 SPA 특성상 크롤링/인덱싱이 어려움을 겪었다(SSR·프리렌더 필요성 인지).
(초간단 한 줄 요약: 토큰 설계의 복잡성, 관리자/랜딩 도메인 분리 판단 지연, 네이버 등록 시 SPA 인덱싱 난이도.)
해결점 :
GA Data API로 핵심 지표를 서버에서 수집·캐싱해 관리자 대시보드에서 트래픽을 즉시 확인 가능하게 함.
Search Console 연동 + SEO 메타(타이틀/디스크립션/키워드, OG 등)를 관리자에서 수정하도록 만들어 운영자가 직접 반영할 수 있게 함.
FE–BE 연동 재설계: 페이지 식별자(page_id/slug) 도입, 페이지↔관리자 모듈 매핑 테이블과 JWT/RBAC 검증으로 다수 페이지를 안정적으로 관리.
도메인/경로 분리 운영을 고려해 API 라우팅·리버스 프록시 규칙을 정리, 관리자와 랜딩을 독립 배포 가능하게 개선.
(요약: GA·검색 데이터 대시보드화, SEO 메타의 관리자 수정, 페이지–관리자 매핑 로직으로 확장성과 운영 편의성을 확보.)
Challenge :
GA 연동 난이도: Data API 권한/스코프, 서비스계정 키 보관·로테이션, 프로퍼티별 GA_ID(멀티테넌시) 및 타임존·샘플링 불일치 해결.
API·컴포넌트 설계: 비동기 상태관리, 캐싱/리트라이, 쿼터·레이트리밋 대응(배치 수집+백엔드 캐시), 지표/차원 매핑 정합성 확보.
대시보드 렌더링 최적화: 로딩/에러 상태, 스켈레톤 UI, 차트 리렌더 최소화(memoization)와 데이터 변환 일관성.
보안/권한: JWT/RBAC로 테넌트별 데이터 격리와 지표 접근 제어.
결론:
전체적으로 흥미로운 프로젝트였고, 진행 과정에서 특별한 어려움은 없었습니다.
More Projects
UI / UX Design
React 웹 개발
제가 만든 사이트는 단순 홍보용 페이지가 아니라 관리자 시스템까지 포함된 서비스입니다. 관리자/매니저가 다양한 계정을 생성·운영할 수 있고, 권한/역할 기반 접근 제어를 Java 기반 토큰(JWT)으로 구현했습니다. 계정별로 전용 로고와 UI가 자동 적용되어 브랜드별로 화면이 개별 렌더링됩니다. 예를 들어 Postburger의 경우 지점 로고와 Google Analytics가 연동되어 일자별 방문자 수·유입 경로 등 핵심 지표를 대시보드에서 확인할 수 있으며, 가맹/제휴를 희망해 남긴 문의(리드)도 해당 브랜드의 전용 대시보드에 자동 수집되어 신속한 후속 대응이 가능합니다. 프랜차이즈 비즈니스에 최적화된 멀티테넌트 구조를 채택해 운영 효율과 확장성을 함께 확보했습니다. NDA 준수로 실제 내부 대시보드는 공개할 수 없으며, 본 이미지는 브랜드 미노출·가상 데이터 데모입니다.
문제점 :
토큰 구조(권한·만료·클레임) 설계가 예상보다 까다로웠다.
관리자 페이지와 랜딩 페이지를 같은 도메인에 둘 필요가 없다는 점을 뒤늦게 인지해 초기 배포 전략이 비효율적이었다.
네이버 검색 등록 과정에서 SPA 특성상 크롤링/인덱싱이 어려움을 겪었다(SSR·프리렌더 필요성 인지).
(초간단 한 줄 요약: 토큰 설계의 복잡성, 관리자/랜딩 도메인 분리 판단 지연, 네이버 등록 시 SPA 인덱싱 난이도.)
해결점 :
GA Data API로 핵심 지표를 서버에서 수집·캐싱해 관리자 대시보드에서 트래픽을 즉시 확인 가능하게 함.
Search Console 연동 + SEO 메타(타이틀/디스크립션/키워드, OG 등)를 관리자에서 수정하도록 만들어 운영자가 직접 반영할 수 있게 함.
FE–BE 연동 재설계: 페이지 식별자(page_id/slug) 도입, 페이지↔관리자 모듈 매핑 테이블과 JWT/RBAC 검증으로 다수 페이지를 안정적으로 관리.
도메인/경로 분리 운영을 고려해 API 라우팅·리버스 프록시 규칙을 정리, 관리자와 랜딩을 독립 배포 가능하게 개선.
(요약: GA·검색 데이터 대시보드화, SEO 메타의 관리자 수정, 페이지–관리자 매핑 로직으로 확장성과 운영 편의성을 확보.)
Challenge :
GA 연동 난이도: Data API 권한/스코프, 서비스계정 키 보관·로테이션, 프로퍼티별 GA_ID(멀티테넌시) 및 타임존·샘플링 불일치 해결.
API·컴포넌트 설계: 비동기 상태관리, 캐싱/리트라이, 쿼터·레이트리밋 대응(배치 수집+백엔드 캐시), 지표/차원 매핑 정합성 확보.
대시보드 렌더링 최적화: 로딩/에러 상태, 스켈레톤 UI, 차트 리렌더 최소화(memoization)와 데이터 변환 일관성.
보안/권한: JWT/RBAC로 테넌트별 데이터 격리와 지표 접근 제어.
결론:
전체적으로 흥미로운 프로젝트였고, 진행 과정에서 특별한 어려움은 없었습니다.
More Projects
UI / UX Design
React 웹 개발
제가 만든 사이트는 단순 홍보용 페이지가 아니라 관리자 시스템까지 포함된 서비스입니다. 관리자/매니저가 다양한 계정을 생성·운영할 수 있고, 권한/역할 기반 접근 제어를 Java 기반 토큰(JWT)으로 구현했습니다. 계정별로 전용 로고와 UI가 자동 적용되어 브랜드별로 화면이 개별 렌더링됩니다. 예를 들어 Postburger의 경우 지점 로고와 Google Analytics가 연동되어 일자별 방문자 수·유입 경로 등 핵심 지표를 대시보드에서 확인할 수 있으며, 가맹/제휴를 희망해 남긴 문의(리드)도 해당 브랜드의 전용 대시보드에 자동 수집되어 신속한 후속 대응이 가능합니다. 프랜차이즈 비즈니스에 최적화된 멀티테넌트 구조를 채택해 운영 효율과 확장성을 함께 확보했습니다. NDA 준수로 실제 내부 대시보드는 공개할 수 없으며, 본 이미지는 브랜드 미노출·가상 데이터 데모입니다.
문제점 :
토큰 구조(권한·만료·클레임) 설계가 예상보다 까다로웠다.
관리자 페이지와 랜딩 페이지를 같은 도메인에 둘 필요가 없다는 점을 뒤늦게 인지해 초기 배포 전략이 비효율적이었다.
네이버 검색 등록 과정에서 SPA 특성상 크롤링/인덱싱이 어려움을 겪었다(SSR·프리렌더 필요성 인지).
(초간단 한 줄 요약: 토큰 설계의 복잡성, 관리자/랜딩 도메인 분리 판단 지연, 네이버 등록 시 SPA 인덱싱 난이도.)
해결점 :
GA Data API로 핵심 지표를 서버에서 수집·캐싱해 관리자 대시보드에서 트래픽을 즉시 확인 가능하게 함.
Search Console 연동 + SEO 메타(타이틀/디스크립션/키워드, OG 등)를 관리자에서 수정하도록 만들어 운영자가 직접 반영할 수 있게 함.
FE–BE 연동 재설계: 페이지 식별자(page_id/slug) 도입, 페이지↔관리자 모듈 매핑 테이블과 JWT/RBAC 검증으로 다수 페이지를 안정적으로 관리.
도메인/경로 분리 운영을 고려해 API 라우팅·리버스 프록시 규칙을 정리, 관리자와 랜딩을 독립 배포 가능하게 개선.
(요약: GA·검색 데이터 대시보드화, SEO 메타의 관리자 수정, 페이지–관리자 매핑 로직으로 확장성과 운영 편의성을 확보.)
Challenge :
GA 연동 난이도: Data API 권한/스코프, 서비스계정 키 보관·로테이션, 프로퍼티별 GA_ID(멀티테넌시) 및 타임존·샘플링 불일치 해결.
API·컴포넌트 설계: 비동기 상태관리, 캐싱/리트라이, 쿼터·레이트리밋 대응(배치 수집+백엔드 캐시), 지표/차원 매핑 정합성 확보.
대시보드 렌더링 최적화: 로딩/에러 상태, 스켈레톤 UI, 차트 리렌더 최소화(memoization)와 데이터 변환 일관성.
보안/권한: JWT/RBAC로 테넌트별 데이터 격리와 지표 접근 제어.
결론:
전체적으로 흥미로운 프로젝트였고, 진행 과정에서 특별한 어려움은 없었습니다.