sketched.space 웹사이트의 구축은 ‘Point of View(POV)’ 개념을 마인드맵 구조로 시각화하여 렌더링하는 방향으로 진행되었습니다. 전체적인 구조는 Canvas 기반의 전체 화면 레이아웃을 도입했습니다. 다수의 노드를 배치하기 위해 원 패킹(Circle Packing) 알고리즘을 적용하였으며, 이를 통해 문제 제기 지점에서 해결 도출 지점으로 전환되는 웹사이트의 서사 구조를 구현했습니다. 이 과정에서 비가시적 영역의 캔버스 렌더링을 위한 다수 객체의 좌표 연산과 Viewport 내 키워드 노드의 상태(State) 관리 기능이 통합되었습니다. 디자인과 기능 면에서는 스크롤 제어를 통한 인터랙션 구현에 주력했습니다. 이를 위해 사용자의 Wheel Event를 차단하고 프로그램 스크롤(Programmatic Scroll)을 실행하는 방식을 도입했습니다. 랜딩(Landing) 페이지의 경우, Gravity Scroll Inducement 메커니즘을 적용하여 화면 중앙의 키워드 군집이 하단으로 이동하는 이벤트를 트리거로 삼아 뷰포트 이동을 강제하도록 구현했습니다. 특히 랜딩 페이지의 파티클 애니메이션은 스크롤링을 기반으로 작동하므로 사용자 환경에 따른 경험 편차를 최소화하고, 일관성 있는 부드러운 프레임 레이트가 유지되도록 렌더링 최적화에 집중했습니다. Service 및 Works페이지에는 시퀀스 라인 애니메이션(Sequence Line Animation)을 적용하여 페이지 이동과 정보 노출을 제어했습니다. 기준선(Baseline)이 하단으로 연장되는 애니메이션의 진행 비율을 스크롤 값에 동기화하였으며, 선의 연장 상태에 따라 후속 섹션의 노출이 결정되도록 설계했습니다. 서비스 페이지는 스크롤 시 콘텐츠가 상단으로 상승하는 듯한 시각적 효과를 적용하여 스크롤 과정의 단조로움을 방지했습니다. Works 페이지는 사용자 스크롤 입력 없이 콘텐츠가 하단으로 자동 이동하며, 마우스 Hover 이벤트 발생 시 화면 이동이 정지하고 상세 설명이 노출되도록 구현했습니다. 기술적으로 이 기능은 뷰포트 진입을 감지하고, 애니메이션 라이브러리의 연산을 거쳐 스크립트에 설정된 좌표 단위로 화면을 제어하는 방식으로 작동합니다. 데이터 관리 측면에서는 Sanity CMS를 연동하여 콘텐츠 업데이트 구조를 확립했습니다. 이 과정에서 클라이언트 역시 관리자 페이지를 조작하는 사용자임을 고려하여, 직관적인 데이터 입력과 수정이 가능하도록 Schema를 구성하고 관리자 UX 최적화를 중요하게 고려했습니다.