생각의 깊이가 디테일을 만든다고 믿습니다.

작은 인터랙션 하나에도 이유가 있다고 생각합니다.

왜 이런 흐름이 만들어졌는지 집요하게 파고 들고,

그 과정에서 발견한 것들을 디테일하게 구현해 나가는 프론트엔드 개발자 김봄입니다.

#구조적사고 #기록 #인터렉션

About Me.

• **Email | **[email protected]
• GitHub | https://github.com/bom0320
• LinkedIn | https://www.linkedin.com/in/봄-김-971a1335a/
• Velog | https://velog.io/@bom_0320/posts
• Website | https://kimbom.dev/

Skills

• React, React Native, Next.js, TypeScript
• Zustand, React Query, GSAP

Main Projects.

Web Portfolio

Next.js · TypeScript · GSAP · ScrollTrigger · Lenis · SCSS

인터랙션 기반 개인 포트폴리오 웹사이트입니다.

단순히 프로젝트를 나열하는 방식이 아니라, 프론트엔드 개발자로서의 포지셔닝을 먼저 정의하고, 제가 어떤 기준으로 화면과 경험을 바라보는 개발자인지를 하나의 스토리처럼 보여주기 위해 제작했습니다.

배포 링크 → ㅤㅤGithub →

2025.08 - 2026.06 · 유지보수 중

Design,Developer: 1명

👩🏻‍💻 내가 기여한 부분

스크롤 스토리텔링 기반 원페이지 구조 설계

• Apple식 스크롤 스토리텔링에서 힌트를 얻어, 고정된 기준점 위에 정보 레이어가 단계적으로 전환되는 원페이지 스크롤 흐름을 설계
• Fluid Interface 원칙에서 말하는 반응성, 연속성, 공간적 일관성을 참고해 스크롤이 단순 이동이 아니라 장면 전환의 입력처럼 느껴지도록 구성
• Capability Stage Narrative 에서는 Flow, Structure, Motion 이라는 작업 관점이 단계적으로 드러나더록 설계

GSAP 기반 스크롤 인터랙션 구현

• Time-based vs. Scroll-based Animation에서 정리한 기준을 바탕으로, 자동 재생되는 연출이 아니라 사용자의 스크롤 진행도에 따라 정보가 드러나는 scroll-based interaction으로 설계
• Lenis + GSAP + Motion 아키텍처에 따라 Lenis는 스크롤 감각, GSAP은 pin, scrub, timeline 기반 스크롤 연출, Motion은 UI 디테일을 담당하도록 역할 분리
• Stage Animation 리팩토링을 통해 역재생 가능한 구간과 단방향 reveal 구간을 분리하고, setProgress, destroy 형태의 animation controller로 제어 방식을 통일

Stage · Scene · Animation 아키텍처 정리

• Stage / Scene / Animation Architecture에서 Stage는 스크롤 흐름, Scene은 화면 구조, Animation은 움직임 방식을 담당하도록 책임을 분리
• 전체 Animation 구조 리팩토링을 통해 DOM 수집, ScrollTrigger 등록, animation controller 생성, cleanup 책임을 파일 단위로 정리
• .js-* 클래스 사용 규칙과 Selector 관리 기준을 정리해 스타일 클래스와 애니메이션 타겟 클래스를 분리하고, selector 관리 위치를 명확히 구분

One-page Scroll Flow

Capability Stage - 작업 관점 소개

Project Detail - 작업 과정과 결과 정리

Hero Section - 첫 진입 화면

Project Navigator - 프로젝트 탐색 구조

⚙️ Trouble Shooting

Capability Structure 섹션의 Scroll Drawing Animation 안정화

• Capability Stage의 Structure 섹션에서 core, stem, branch, node, card가 스크롤 진행도에 따라 차례로 그려지는 scroll drawing animation을 구현
• 초기에는 ScrollTrigger progress는 정상적으로 동작했지만, 실제 화면에서는 애니메이션이 이미 완료된 상태처럼 보이는 문제 발생
• ScrollTrigger start/end, timeline 길이, desktop/mobile layout 차이를 함께 조정하고, registerMaxProgressTrigger로 단방향 reveal 흐름을 유지
• timeline을 짧은 reveal animation이 아니라 긴 scroll drawing 구조로 재설계해, 사용자가 요소를 보는 시점과 animation progress가 맞도록 개선
  • 관련 기록: Capability Structure 섹션의 Scroll Drawing Animation 안정화