작업 목표
- 웹 퍼블리셔로서의 역량과 작업물을 명확하게 보여주는 사이트 제작
- Intro, About, Works, Process, Contact로 이어지는 자연스러운 정보 흐름 설계
- 스크롤 모션과 카드 인터랙션을 활용해 기억에 남는 포트폴리오 경험 구성
- PC와 모바일 환경 모두에서 안정적으로 확인 가능한 반응형 레이아웃 구현
개인 포트폴리오 사이트
웹 퍼블리셔로서의 작업물, 역량, 작업 과정을 한눈에 보여주기 위해 직접 기획하고 제작한 개인 포트폴리오 웹사이트입니다.
Overview
이 프로젝트는 저의 웹 퍼블리싱 작업물과 디자인 작업물을 한 곳에서 보여주기 위해 제작한 개인 포트폴리오 사이트입니다. 단순히 작업물을 나열하는 방식이 아니라, 사용자가 Intro, About, Web Works, Design Works, Process, Contact 순서로 자연스럽게 이동하며 저의 경험과 작업 방향을 이해할 수 있도록 구성했습니다.
프론트엔드 실무 경험을 바탕으로 화면 구조, 반응형 레이아웃, 섹션별 인터랙션, 접근성 요소를 함께 고려했습니다. 특히 Web Works 영역에는 GSAP 기반의 스크롤 모션과 카드형 프로젝트 구성을 적용해 작업물이 시각적으로 인상 있게 전달되도록 했습니다.
구현 포인트
- 상단 고정 헤더와 모바일 메뉴를 구성해 섹션 이동 편의성 개선
- Web Works 영역에 GSAP ScrollTrigger 기반의 스크롤 인터랙션 적용
- Design Works 영역에 카드형 작업물 리스트와 좌우 컨트롤 구조 구현
- SEO, Open Graph, 파비콘을 적용해 실제 배포를 고려한 메타 정보 구성
Page Detail
메인 페이지는 Intro, About, Web Works, Design Works, Process, Contact 섹션으로 구성했습니다. Intro 영역에서는 제 역할과 방향성을 짧고 강하게 보여주고, About 영역에서는 사용자가 읽기 쉬운 화면과 유지보수 가능한 코드를 중요하게 생각한다는 작업 태도를 설명했습니다. Works 영역에서는 웹 작업물과 디자인 작업물을 분리해 보여주어, 프로젝트 성격에 따라 작업물을 쉽게 구분할 수 있도록 했습니다.
Structure
포트폴리오를 처음 보는 사람이 작업자의 소개, 기술 역량, 작업물, 작업 방식, 연락처를 순서대로 확인할 수 있도록 섹션 흐름을 설계했습니다.
Visual Direction
차분한 다크 그린 계열의 무드와 카드형 UI, 그래픽 요소를 함께 사용해 전문성과 개성을 동시에 보여줄 수 있도록 구성했습니다.
Interaction
포트폴리오 사이트의 인상을 강화하기 위해 GSAP과 ScrollTrigger를 활용한 스크롤 모션을 적용했습니다. Web Works 영역에서는 스크롤에 따라 작업 카드가 등장하고, 배경의 그래픽 요소와 지구본 형태의 SVG가 함께 배치되어 정적인 소개 페이지보다 더 입체적인 흐름을 만들었습니다. 모바일에서는 햄버거 메뉴를 통해 주요 섹션으로 이동할 수 있도록 구성했습니다.
GSAP Motion
스크롤 위치에 따라 섹션과 카드가 자연스럽게 등장하도록 구성해 사용자가 페이지를 탐색하는 동안 시각적인 리듬을 느낄 수 있게 했습니다.
Mobile Menu
모바일 화면에서는 메뉴 버튼을 통해 내비게이션을 열고 닫을 수 있도록 구현해 작은 화면에서도 섹션 이동이 편리하도록 구성했습니다.
Publishing Point
HTML은 헤더, 메인, 섹션, 카드, 푸터처럼 역할이 분명한 단위로 나누어 작성했습니다. CSS는 reset, variables, layout, common, animation, portfolio 파일로 분리해 관리성을 높였고, rem 단위와 공통 클래스를 활용해 전체 화면의 간격과 스타일이 일관되도록 구성했습니다. 또한 SEO와 Open Graph 메타 태그, 파비콘을 적용해 실제 포트폴리오 사이트로 사용할 수 있도록 기본 설정을 함께 정리했습니다.
CSS Structure
공통 스타일, 레이아웃, 애니메이션, 포트폴리오 전용 스타일을 파일별로 분리해 수정과 확장이 쉽도록 정리했습니다.
SEO Setting
description, keywords, Open Graph, Twitter Card, favicon을 설정해 공유와 검색 노출까지 고려한 웹사이트 구조를 만들었습니다.
Learning Point
이번 작업을 통해 포트폴리오는 단순히 결과물을 모아두는 공간이 아니라, 작업자의 방향성과 강점을 설계해서 보여주는 하나의 웹사이트라는 점을 다시 정리할 수 있었습니다. 어떤 작업을 먼저 보여줄지, 소개 문구를 어떻게 배치할지, 작업물 카드와 상세 페이지를 어떻게 연결할지 고민하며 정보 구조와 사용자 흐름을 함께 설계했습니다.
Portfolio Planning
자기소개, 기술 역량, 작업물, 프로세스, 연락처를 하나의 흐름으로 엮으며 포트폴리오 사이트의 정보 설계 방식을 익혔습니다.
Motion Balance
모션을 과하게 넣기보다 작업물 탐색을 방해하지 않는 선에서 시각적 인상을 주는 방향을 고민하며 인터랙션의 균형을 맞췄습니다.