본문으로 건너뛰기
프로젝트개인 작업여정
Eun
프로젝트개인 작업여정

Esc 키로 이전 위치로 돌아갑니다•카카오톡 클론

개인 프로젝트 • 2025.09.27~2026.05.23 • 결과

카카오톡 클론

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

페이지 이동하기GitHub

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

캡처

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

등록된 프로젝트 이미지가 없습니다.

개요

유형
개인 / Vue 클론 코딩
기간
2025.09.27~2026.05.23

Core

Vue 3Vue Router 4Vite 6SCSSJavaScript

Library / Tool

@vuepic/vue-datepickerholiday-krvite-svg-loader

내가 한 일

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

성과

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

포인트

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

긴 이야기의 마침표입니다. 끝까지 읽어 주셔서 고마워요.

이전 프로젝트다음 프로젝트

✦

웹 퍼블리셔·웹 프론트엔드 개발자 은영환의 2026 포트폴리오

  • 포트폴리오 홈
  • 실무 프로젝트 갤러리
  • 개인 프로젝트 갤러리

© 2026 Eunyounghwan Portfolio