카카오톡 클론

상세

새로운 개발 언어 학습을 위해 기획·디자인이 완료된 카카오톡 UI를 Vue 3로 클론 코딩한 개인 프로젝트입니다. 채팅·친구·설정 등 주요 화면 흐름을 컴포넌트 단위로 나누고, GitHub Pages base path(`/cloneKakaoTalk/`) 배포까지 포함해 실서비스에 가까운 프론트엔드 구조를 연습했습니다.

소요 시간: 약 8개월 (지속 개선)
언어·핵심 스택: Vue 3Vue Router 4Vite 6SCSSJavaScript
사용 도구·전체 스택: Vue 3Vue Router 4Vite 6SCSS@vuepic/vue-datepickerholiday-krvite-svg-loader

데모 보기 GitHub

캡처

이미지 준비 중대신 설명은 먼저 열어뒀어요.

개요

역할: 기획·UI 구현·퍼블리싱·프론트엔드 개발 전체 담당

내가 한 일

카카오톡 주요 화면 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`) 구성

성과

GitHub 커밋 120회 이상으로 화면·컴포넌트를 단계적으로 확장하며 Vue 3 Composition API에 익숙해짐
프레임워크 없이 HTML만 쓰던 2025 포트폴리오 이후, SPA·라우팅·빌드 도구를 갖춘 Vue 기반 작업으로 전환

포인트

기존 서비스 UI를 그대로 따라가며 컴포넌트 분리·상태·라우팅 설계를 연습한 학습용 클론
배포 URL과 저장소 README를 기준으로 로컬 실행·base path 규칙을 문서화해 재현 가능하게 유지