KOEN / SOON
KOEN / SOON
← BACK TO WORK INDEX

CREATIVE DEVELOPMENT

STANN WEB

DOM, GSAP와 WebGL2를 엮은 인터랙티브 포트폴리오입니다.

검은 배경과 붉은 신호 그래픽 위에 STANN의 개발자·아티스트 정체성을 소개하는 포트폴리오 홈 화면.
STANN WEB / HOMECASE / 003 · STANN / PRODUCT CAPTURE
STATUS
IN DEVELOPMENT
PROJECT TIMELINE
2026.07 - PRESENT
RESPONSIBILITY
CREATIVE DEVELOPMENT

CASE / PROBLEM AND APPROACH

WHAT HAD TO CHANGE.

PROBLEM
시각 장면이 사례 탐색을 가리지 않아야 했습니다.
APPROACH
콘텐츠와 포커스는 DOM에 두고 GSAP와 WebGL2를 향상 계층으로 분리했습니다.
CONTRIBUTION / 01

WHAT I BUILT

  • 정보 구조, ScrollTrigger 장면과 prism fallback을 구현했습니다.
DECISIONS / 02

CHOICES AND TRADE-OFFS

  • MOTION CAN FAIL모션과 Canvas가 멈춰도 텍스트, 링크와 포커스 순서가 남게 했습니다.
OUTCOME / 03

VERIFIED RESULT

  • 모션 감소 설정이나 WebGL 실패에서도 콘텐츠와 핵심 경로가 남습니다.
STATE / 04

CURRENT STATE

IN DEVELOPMENT / 이 사이트에서 계속 업데이트 중입니다.

EVOLUTION / PHASES

ONE DOM, OPTIONAL MOTION.

  1. DOM / MOTION / WEBGL

    2026.07 - PRESENT

    접근 가능한 DOM 위에 스크롤 장면과 prism을 더했습니다.

IMPLEMENTATION

RUNTIME / DELIVERY STACK

  • SITE / Next.js
  • SCROLL / GSAP
  • LIGHT / WebGL2
EVIDENCE

IMPLEMENTATION EVIDENCE

  • WebGL 초기화 실패, context loss와 스크롤 장면 종료 처리를 구현과 테스트로 고정했습니다.
LINK