이미지 준비 중이미지는 준비 중이지만, 작업 이야기는 먼저 열어 두었습니다.

프로젝트 한눈에 보기

카카오톡 클론

쉽게 말하면

카카오톡의 주요 사용자 흐름을 Vue 3 기반 SPA로 재구현한 프로젝트입니다. 채팅 / 친구 / 설정 화면을 라우트와 컴포넌트 단위로 분리하고, 공통 UI와 배포 환경을 체계화해 기능 확장과 유지보수를 고려한 구조로 구현했습니다.

Vue 3 / Vue Router 4 / Vite 6 / SCSS / @vuepic/vue-datepicker / holiday-kr / vite-svg-loader

페이지 이동하기GitHub

유형
개인 / Vue 클론 코딩
기간
2025.09.27~2026.05.23
소요 시간
약 8개월
역할
기획 / UI 구현 / 퍼블리싱 / 프론트엔드 개발 전체 담당

01 / PROJECT NOTE

완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.

문제를 이렇게 풀었습니다

  • 카카오톡 주요 화면 IA를 Vue Router 4 라우트와 레이아웃 컴포넌트로 구성
  • Vite 6 + Sass(SCSS) 기반 스타일 구조, SVG 아이콘 로더(vite-svg-loader) 적용
  • 날짜 / 휴일 선택 UI에 @vuepic/vue-datepicker, holiday-kr 연동
  • GitHub Pages용 base path(`VITE_APP_BASE_URL`)와 dev/root 스크립트로 로컬 / 배포 경로 정리
  • gh-pages 브랜치 배포 파이프라인(`npm run deploy`) 구성

그래서 실제로 달라진 점

  • 화면과 공통 컴포넌트를 단계적으로 확장하며 Vue 3 Composition API 기반 구조 정립
  • 라우팅 / 빌드 / 배포 환경을 포함한 Vue SPA 개발 흐름 구축

이 프로젝트에서 눈여겨볼 점

  • 대규모 메신저 UI를 기준으로 컴포넌트 경계와 라우팅 구조를 설계한 SPA 구현 사례
  • 배포 URL과 저장소 README를 기준으로 로컬 실행 / base path 규칙을 문서화해 재현 가능하게 유지

02 / SCREENS

화면으로 확인하기

말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.

이미지 준비 중이미지는 준비 중이지만, 작업 이야기는 먼저 열어 두었습니다.