pi

인서트→루프 이음새 처리

• · 섹션에 들어가면 전체화면 인서트 영상이 재생되고, 그 영상이 우측 칸의 루프 영상으로 넘어가야 합니다. 칸도 크롭도 프레임도 달라 그냥 바꾸면 그림이 튑니다. 전환을 세 단계로 나눠, 인서트가 도는 동안 루프는 0초에 세워 두고, 오버레이를 루프 칸의 실제 화면 좌표까지 0.62초에 걸쳐 좁히면서 그 안에서 같은 루프를 돌리고 인서트를 0.34초 디졸브로 걷어냅니다.
• · 4K로 교체한 뒤에는 seek이 수백 ms 걸려 0초 프레임이 한 번 비쳤다가 점프하는 것이 드러났습니다. handoff가 시작되는 순간 본 루프도 같은 타임라인으로 함께 재생하도록 바꿔 seek 자체를 없앴고, 디코딩이 0.15초 이상 어긋난 경우에만 마지막에 한 번 보정합니다.

4K 듀얼 포맷 영상 파이프라인

• · 3840×2160 원본 16편을 h264 MP4와 VP9 WebM 두 벌로 인코딩하고, 브라우저가 canPlayType에 'probably'로 답할 때만 WebM을 건네도록 했습니다. 사이트의 모든 영상이 muted로 재생되므로 오디오 트랙은 제거했습니다.
• · 한 편은 원본이 66Mbps라 용량이 튀었는데, CRF를 조여 SSIM 0.977 수준에서 절반으로 줄였고 실제 표시 영역 1:1 비교에서 육안 차이가 없음을 확인했습니다. 해상도는 4배 올리고 총 용량은 195MB → 107MB, 방문자 한 명이 실제로 받는 양은 약 55MB입니다.

호버 프리페치와 화면 방향 분기

• · 인서트 영상이 편당 10MB를 넘어, 클릭한 뒤에 받기 시작하면 첫 프레임까지 빈 화면이 남습니다. 메뉴 버튼에 포인터가 닿는 순간(클릭보다 몇백 ms 앞서) 버퍼링을 시작해, 섹션이 열릴 때는 캐시에서 바로 재생됩니다.
• · 호버가 없는 터치 기기는 진입 후 한가할 때 섹션을 차례로 데우되, 데이터 절약 모드와 2G 회선에서는 아예 건너뜁니다. 데스크톱은 가로형, 모바일은 세로형을 쓰고 인서트와 루프의 방향을 같게 묶어 이음새가 포맷을 넘나들지 않게 했습니다.

DB 원본과 시드 폴백 구조

• · 작품 21편·수상 8건·클라이언트 로고 14곳·사이트 설정을 Postgres로 옮겼습니다. 공개 페이지는 DB를 먼저 읽되 표가 비어 있거나 조회에 실패하면 번들에 함께 실린 시드로 그리기 때문에, 마이그레이션 중이거나 네트워크가 흔들려도 화면이 비지 않습니다.
• · RLS는 익명 조회를 published 행으로 제한하고 쓰기는 로그인 세션에만 허용하며, 마이그레이션은 여러 번 실행해도 안전하도록 작성했습니다. 썸네일과 사이트 파일용 스토리지 버킷을 나눠 두었고, 영문 칸이 비면 국문 값으로 폴백해 빈칸이 노출되지 않습니다.

비개발자용 관리자 CMS

• · 문의 접수·포트폴리오·수상·클라이언트·설정 5개 탭. 유튜브 주소를 통째로 붙여넣으면 ID를 자동으로 뽑아내고, 썸네일은 스토리지로 바로 업로드되며, 노출 순서는 숫자 입력이 아니라 ↑↓ 버튼으로 바꿉니다.
• · 수상작 카드가 4:3으로 잘리는 문제는 CSS object-position을 '잘릴 위치 슬라이더'로 감싸고 미리보기를 실제 카드와 같은 비율로 보여줘 해결했습니다. 회사소개서 PDF를 올리면 사이트 좌하단 버튼이 즉시 생기고, 연결을 해제하면 버튼 자체가 사라져 깨진 링크가 남지 않습니다.

로그인 뒤의 단가표, 로그인 앞의 SEO

• · 고객 화면에는 금액을 일절 노출하지 않기로 하여, 단가표를 관리자 번들에만 두었습니다. 접수 건에는 선택값만 저장되고 금액 환산은 로그인 이후에 일어납니다. 관리자 화면은 지연 로딩으로 분리해 방문자 번들에 섞이지 않으며, 유휴 시간 자동 로그아웃과 접수 내역 CSV 내려받기를 갖췄습니다.
• · SPA라 빌드 결과의 body가 #root 하나뿐이어서, 자바스크립트를 실행하지 않는 크롤러에는 링크를 공유해도 아무것도 뜨지 않는 상태였습니다. OG 이미지를 새로 만들고 정적 메타·트위터 카드·canonical·hreflang·Organization JSON-LD를 넣은 뒤, 언어 토글이 새로고침 없이 경로만 바꾸는 점을 감안해 전환 시점에 lang·제목·og:url·canonical을 다시 쓰도록 했습니다. 관리자 경로는 robots.txt에 적으면 오히려 주소를 알리는 셈이라 noindex 메타로 처리했습니다.

아케이드 캐비닛 아이덴티티

쇼킹핑크(#F90663)와 틸(#002A32)을 화이트 위에 올리고, 픽셀 폰트를 두꺼운 검정 테두리와 3D 그림자에 넣었습니다. 커서는 픽셀 아트로 교체하고 호버·클릭음은 Web Audio로 합성했습니다. 메뉴 뒤 공간에는 스튜디오의 캐릭터들이 실제로 살고 있어서, 홈 화면이 도착한 페이지가 아니라 걸어 들어간 장소로 읽힙니다.

전환 장치로서의 영상

페이지가 등장하는 모션을 따로 두지 않았습니다. 인서트 영상이 곧 전환이고, 그 레이어가 걷히면 이미 완성된 페이지가 아래에 놓여 있습니다. 흐름 어디에도 로딩 표시가 필요 없었던 이유이기도 합니다.

분할 스테이지 레이아웃

데스크톱은 좌측 하프톤 콘텐츠 패널과 우측 풀하이트 루프 영상으로 나누고, 모바일은 세로 영상을 위에 둔 한 덩어리로 함께 스크롤됩니다. 가로 영상은 캐릭터가 프레임 오른쪽에 있어 오른쪽 정렬로 두어, 잘려 나가는 쪽이 비어 있는 왼쪽이 되게 했습니다.

글자 굵기로 정한 문장부호 규칙

온점을 문장마다 판단하지 않고 규칙으로 정리했습니다 — 큰 타이틀에는 빼고, 얇은 본문에는 넣는다. 그리고 국문과 영문을 항목마다 짝지어 대조해 맞췄습니다. 디스플레이 폰트의 쉼표가 숫자 9로 읽힌다는 지적에는 쉼표 글자만 다른 폰트로 바꿔 끼웠습니다.