포트폴리오 웹사이트 2026

개요

역할: 디자인·퍼블리싱·구조 설계·프론트엔드 개발 전체 담당

내가 한 일

• 포트폴리오 전체 IA, 화면 흐름, 섹션 구성, 카드형 프로젝트 갤러리 설계
• Nuxt 3·Vue 3 기반 라우팅, 상세 페이지, 데이터 분리 구조, SEO 메타 구성 개발
• 색상·여백·폰트·라운드·그림자를 역할 기반 디자인 토큰으로 정리하고 별도 설명 페이지 구현
• 흩어져 있던 SCSS partial을 화면 스타일 main.scss와 토큰 _tokens.scss로 통합해 현재 규모에 맞는 스타일 관리 구조로 리팩터링
• core 폴더에 모여 있던 앱 계층을 composables·stores·plugins·i18n·api·data·config 루트 구조로 재배치
• 사용되지 않는 카드 컴포넌트를 제거하고 소개·툴박스 카드 계열을 FeatureCard로 통합해 컴포넌트 수와 역할 중복을 정리
• GitHub Pages 정적 배포 경로와 public asset 경로를 고려한 빌드 구조 정리

성과

• 디자인, 퍼블리싱, 설계, 프론트엔드 개발까지 전 과정을 단독 수행
• 실무 프로젝트·개인 프로젝트·하이라이트 콘텐츠를 데이터 기반으로 확장 가능하게 구성
• SCSS 파일 수를 11개에서 2개로 줄이되 선택자와 선언 순서를 유지해 화면 회귀 없이 구조만 단순화
• Pinia 상태는 앱 환경 설정과 포트폴리오 UI 상태로 묶고, Nuxt 플러그인은 초기화와 분석 스크립트 계열로 통폐합
• 컴포넌트는 화면에서 실제 호출되는 단위 중심으로 남겨, 디자인 시스템 문서와 코드 목록이 어긋나지 않도록 정리

포인트

• 단순 정적 페이지가 아닌 컴포넌트·데이터 중심 포트폴리오 구조
• 디자인 토큰 페이지에서 네이밍과 사용 이유를 함께 확인할 수 있어 유지보수 기준이 분명함
• 운영 중인 실제 배포 URL을 기준으로 개선과 리팩터링을 계속 반영
• 스타일 본문과 디자인 토큰을 분리해, UI 수정은 main.scss에서 보고 토큰 변경은 _tokens.scss에서 확인할 수 있는 구조