숙박 큐레이션 플랫폼 프론트엔드 2022 ~ 2024 경력 기술서

한눈에 보기

핵심 역량

1. 다국어 적용 (일본어)

한국어·영어로만 운영하던 서비스에 일본어를 붙였습니다. i18next로 번역 구조를 잡고, 운영자가 관리 화면 한 곳에서 한국어·영어·일본어 콘텐츠를 함께 입력할 수 있게 했습니다. 일본어 페이지는 같은 디자인이어도 글자 크기와 줄바꿈이 다르게 보여서 글자 크기·줄 간격·word-break를 따로 맞췄습니다. 주소는 영어는 경로에 언어 코드를 붙이고, 일본어는 별도 도메인으로 운영했습니다.

• 일본어는 도메인, 영어는 경로로 나뉜 이유2022-10-07일본어는 도메인, 영어는 경로 — 언어 축이 둘로 갈린 라우팅숙박 큐레이션 플랫폼의 고객 웹은 한국어·영어·일본어를 지원했는데, 영어는 주소 경로에 언어 코드가 붙고 일본어는 별도 도메인이었습니다. 경력기술서에는 "URL 경로에 언어 코드를 채택했다"고 적었는데 코드를 다시 보니 절반만 맞는 말이었어요. 왜 일본어만 도메인으로 갈랐는지는 코드에 이유가 남아 있지 않고, 갈린 결과로 생긴 리다이렉트 세 개와 API 도메인 치환 함수만 남아 있습니다.
• 번역 키를 한국어 원문으로 쓴 대가2022-11-27번역 키를 한국어 원문으로 썼다 — 5,091줄 리소스 파일의 대가숙박 큐레이션 플랫폼의 번역 리소스는 TypeScript 객체 한 파일 5,091줄이었고, 키의 상당수가 "가격 범위"처럼 한국어 원문이었습니다. 한국어 키는 한국어 리소스를 거의 안 써도 되게 해 주지만, 그 대가로 영어 리소스가 한국어의 2.7배가 됐고 일본어에는 빠진 키가 1,539개였어요. 경력기술서에 적은 "JSON 관리·동적 로딩"은 코드에 없었습니다.

2. 프로모션

프로모션마다 지원하는 언어가 달라서, 프로모션별로 지원 언어 목록을 두고 지원하지 않는 언어로 들어오면 빈 화면 대신 안내 모달을 띄운 뒤 이전 화면으로 돌려보냈습니다. 숙소 이미지를 세로로 길게 나열하던 화면은 슬라이더로 바꿔 한눈에 볼 수 있게 했고, 딜 목록에는 무한 스크롤을 붙였습니다. 해외 사용자에게도 프로모션 알림을 보낼 수 있도록 국가 코드를 관리자에서 직접 관리하고 엑셀로 넣는 기능을 백엔드와 함께 만들었습니다. 외부 업체를 거쳐야 했던 알림은 내부 시스템으로 옮겨, 알림 문구와 대상을 운영자가 직접 고칠 수 있게 했습니다.

• 프로모션마다 지원 언어를 두고, 안 되는 언어면 뒤로 보낸 방법2023-02-24프로모션마다 지원 언어를 두고, 안 되는 언어면 뒤로 보냈다 — 404 대신 모달과 back프로모션은 한국어에만 있는 것도, 세 언어에 다 있는 것도 있었습니다. 프로모션마다 지원 언어 목록을 두고, 지금 언어가 그 안에 없으면 404나 빈 화면이 아니라 "이 언어는 지원하지 않는다"는 모달을 띄우고 닫으면 뒤로 보냈어요. 그 판단과, 같은 화면의 딜 목록이 SWR 무한 스크롤을 어떻게 이어받았는지를 코드로 다시 읽었습니다.

3. 프리오더

프리오더와 프로모션이 비슷한 화면인데 데이터 구조가 달라 따로 관리되고 있었습니다. 두 페이지의 데이터 구조를 하나로 합쳐 같은 코드를 쓰게 했고, 마케팅팀이 두 페이지의 데이터를 함께 분석할 수 있도록 GA4·UTM 기반 분석 환경을 갖췄습니다.

4. 가격

할인 범위가 한눈에 안 보여서, 숙소 목록 카드에 "최소~최대 가격"을 표시하고 할인가와 기본가를 구분해 보여 줬습니다. 숙소 하나에 가격 필드가 여덟 개라 어느 값이 원가이고 할인가인지 서버 코드까지 따라가 정했습니다. 관리자·파트너 화면에서는 복잡한 할인 목록을 중요·일반·특수 세 탭으로 나눴고, 고객 화면과 관리자 화면이 같은 가격 데이터 구조를 쓰도록 맞췄습니다. 고객은 할인 범위를 한눈에 보게 됐고, 운영자는 많은 할인 항목 중 중요한 것부터 찾을 수 있게 됐습니다.

• 한 숙소에 가격 필드가 여덟 개였던 일2023-09-01한 숙소에 가격 필드가 여덟 개 — 최소~최대 표시를 맞추던 일숙소 목록 카드에 "할인가 ~"를 보여 주려는데, 숙소 타입 하나에 가격 필드가 네 쌍 여덟 개였습니다. 이름이 비슷한 네 쌍 중 무엇이 원가이고 무엇이 할인가인지, 화면은 어느 쌍을 믿어야 하는지를 서버 서비스와 직렬화기까지 따라가서 정했어요. 최대라는 이름의 필드에 최솟값이 들어가는 것도 그때 알았습니다.

5. 앱 전환과 이벤트 태깅

모바일 웹 방문자가 앱으로 넘어갈 길이 없었고, 웹과 앱의 행동 데이터가 갈라져 있어 캠페인 효과를 잴 수 없었습니다. 모바일 유입에만 앱 설치 안내를 상단에 상시 노출했고, GA4 이벤트를 심고 앱 안 웹뷰에서도 같은 이벤트가 Firebase로 이어지게 해 웹과 앱을 한 퍼널로 볼 수 있게 했습니다. 배너·팝업은 외부 도구를 붙여 노출 조건을 마케팅팀이 배포 없이 직접 바꾸게 하고, 프런트엔드는 트리거 위치와 내부 사용자 제외 기준만 제공했습니다.

담당 범위: 아래는 마케팅·데이터·디자인·개발팀이 함께 낸 전사 지표입니다. 제가 맡은 건 앱 전환 경로 구현, 이벤트 태깅, 마케팅 도구 연동이었습니다.

• 2023.07–09 전사 캠페인: 상반기 대비 앱 설치율 약 600% 증가, 앱 설치 비용 약 70% 절감, 3차 캠페인 앱 설치 4,622건 (기존 월평균 1,400–1,500건) — 공개된 정부 우수사례 보고서 기준
• 배너·팝업 도입 후: 프로모션 배너 노출 뒤 매출 약 246% 상승, 앱 설치 팝업으로 전주 대비 앱 설치 약 92% 증가 — 마케팅 도구 공개 사례 기준

참고 : 사이트 화면