프로젝트 한눈에 보기
포트폴리오 웹사이트 2026
쉽게 말하면
실무 경험과 프론트엔드 역량을 일관된 기준으로 전달하기 위해 구축한 Nuxt 3 기반 포트폴리오입니다. 시맨틱 HTML과 SCSS를 기반으로 Vue 컴포넌트, 상태 관리, 다국어 콘텐츠 구조를 적용해 정보 확장과 유지보수가 용이하도록 설계했습니다.
HTML5 / SCSS / Nuxt 3 / Vue 3 / TypeScript / Vite
01 / PROJECT NOTE
제가 맡고 끝까지 책임진 일
완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.
문제를 이렇게 풀었습니다
- 시맨틱 HTML과 SCSS를 기준으로 홈 / 갤러리 / 상세 페이지 퍼블리싱
- Vue template, props, v-if, v-for, Teleport로 반복 UI와 모바일 메뉴 구성
- 한국어 / 영어 UI 문구와 프로젝트 콘텐츠를 i18n/ko.json, i18n/en.json에 통합
- Nuxt 파일 기반 라우팅과 Vite 번들 환경을 활용해 정적 포트폴리오 구성
- 색상 / 여백 / 폰트 / 라운드 / 그림자를 SCSS 디자인 토큰으로 정리
- 사용하지 않는 모션 / 스토어 / 컴포넌트를 제거해 HTML에 가까운 화면 코드로 단순화
- GitHub Pages base path와 public asset 경로를 고려한 정적 배포 구조 정리
그래서 실제로 달라진 점
- 디자인, 퍼블리싱, 설계, 프론트엔드 개발까지 전 과정을 단독 수행
- 실무 / 개인 프로젝트와 전체 한 / 영 콘텐츠를 i18n JSON으로 통합해 콘텐츠 관리 효율 향상
- Vue 상태 관리는 언어 / 테마처럼 필요한 값만 Nuxt useState로 유지
- 사용하지 않는 GSAP / Pinia 의존성과 모션 / 모달 코드를 제거해 화면 구조를 단순화
- 실제 사용되는 컴포넌트 중심으로 구조를 정리해 유지보수성과 코드 가독성 확보
이 프로젝트에서 눈여겨볼 점
- 시맨틱 마크업과 디자인 토큰을 기반으로 한 일관된 UI 구현
- 반복 UI를 컴포넌트화해 화면 확장과 변경 대응 효율 확보
- 한 / 영 콘텐츠 중앙 관리로 운영 시 수정 범위와 오류 가능성 최소화
- 정적 배포 환경에서도 안정적으로 운영 가능한 자산 / 경로 구조 적용
02 / SCREENS
화면으로 확인하기
말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.
