Studio
브라우저 안의 비파괴 RAW 파이프라인: 핵심 제약은 색이었습니다.
- 연도
- 2026
- 제작 기간
- 12주
- 기술 스택
- Next.js · React · TypeScript · Tailwind · Vercel
- 프로덕트 디자인
- 인터페이스 디자인
- 개발
- 이미지 처리
Kayzen Web이 개발·운영하는 제품으로, 정식 도메인으로 옮기기 전까지 Vercel 미리보기 주소에서 제공됩니다.
- 처음부터 끝까지 이어지는 색 관리
- ICC
- Lighthouse 접근성
- 97/100
- Lighthouse 권장사항이 항목에서 우리의 최저 점수입니다. 브라우저 내 RAW 처리는 Lighthouse가 경고하는 API에 기반합니다. 기능을 빼는 대신 점수를 있는 그대로 공개하며, 재검토 일정이 잡혀 있습니다.
- 73/100
해결해야 했던 과제.
배경
Studio는 온라인 사진 현상 애플리케이션입니다. RAW 가져오기, 비파괴 보정, 처음부터 끝까지 이어지는 ICC 색 관리, 다양한 포맷으로 내보내기를 지원합니다.
제약
사진가는 편의 때문에 도구를 바꾸지 않습니다. 걸림돌은 두 가지입니다. 색 재현의 정확성(색조가 틀어져 나온 파일은 쓸 수 없습니다), 그리고 비파괴성, 즉 6개월 뒤에도 어떤 설정이든 되돌릴 수 있는 것.
해법
인터페이스보다 색을 먼저 다뤘습니다. 카메라의 입력 프로파일, 선형 작업 공간, 내보낼 때 고르는 출력 프로파일. 색 처리 체인은 명시적이며 사용자에게 표시됩니다. 설정은 원본 파일에 적용되지 않고 작업 목록으로 저장됩니다.
납품 시점에 측정한 점수.
운영 중인 사이트의 Lighthouse 점수입니다. 있는 그대로 공개합니다. 낮은 점수가 있으면 그 원인과 개선 계획을 아래에 적어 두었으며, 감추지 않습니다.
모든 선택에는 이유가 있습니다.
중립적인 다크 인터페이스
이미지 주변은 어떤 색조도 없는 엄격한 중립 회색입니다. 색이 들어간 인터페이스는 화이트 밸런스 인식을 왜곡합니다. 보정 소프트웨어의 첫 번째 규칙이며, 어떤 미적 고려보다 우선합니다.
늘 보이는 히스토그램
설정 패널 상단에 고정하고 클리핑 경고를 달았습니다. 사진가의 측정 도구입니다. 탭 뒤에 숨기는 것은 수평계를 공구함에 넣어 두는 것과 같습니다.
업계 표준 키보드 단축키
단축키는 대표적인 소프트웨어의 것을 따릅니다. 전문가 사용자에게 새로운 문법을 강요하면 배운 것을 잊으라고 요구하는 셈이며, 전환 비용이 이득보다 커집니다.
프로젝트 색상 팔레트
뉴트럴 그레이 900
#18181B
작업 공간 배경
뉴트럴 그레이 700
#3F3F46
패널
모브
#A78BFA
강조, 선택
클리핑 레드
#EF4444
하이라이트 경고
타이포그래피 체계
제목용 서체
Inter 600
본문용 서체
Inter 400
숫자 값은 고정폭으로 표시합니다. 값의 너비가 들쭉날쭉한 슬라이더는 부정확하게 느껴집니다.
보이지 않는 곳의 기술.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
WebAssembly로 RAW 디코딩
독자 포맷(CR3, NEF, ARW)의 디코딩은 워커 안의 WebAssembly에서 돌아갑니다. 메인 스레드는 비어 있어, 6천만 화소 파일을 디코딩하는 동안에도 슬라이더가 반응합니다.
WebGL을 통한 GPU 렌더링
보정은 그래픽 카드의 셰이더로 적용됩니다. CPU로 처리했다면 이 해상도에서 미리보기를 쓸 수 없었을 것입니다.
픽셀이 아닌 작업 기록
모든 설정은 직렬화 가능한 작업 스택의 한 항목입니다. 되돌리기, 여러 장에 같은 보정 적용, 프리셋 내보내기. 모든 것이 이 구조에서 나옵니다.
사이트가 검색되는 방식.
제품이 아닌 유입을 위한 SEO
애플리케이션 자체는 색인되지 않으며, 그럴 필요도 없습니다. SEO는 발견이 일어나는 소개 페이지와 비교 페이지를 대상으로 합니다.
누구나 사용할 수 있도록.
2025년 6월부터 유럽 접근성법(European Accessibility Act)에 따라 상당수 온라인 서비스에 디지털 접근성이 의무화되었습니다. 저희는 사후 보완이 아니라 설계 단계에서부터 접근성을 다룹니다.
전문가용 인터페이스에서도 97/100
모든 슬라이더는 레이블, 음성으로 안내되는 값, 키보드 단계를 갖춘 네이티브 input입니다. 보정 인터페이스는 거의 모두 이를 생략하지만, 그래야 할 기술적 이유는 전혀 없었습니다.
납품한 결과물.
- 소개
- 보정 애플리케이션
- 포맷과 호환성
- 요금
프로젝트 진행 과정.
색 관리 체인
입력 프로파일, 작업 공간, 출력 프로파일.
디코딩
WebAssembly, 워커, 빠른 미리보기.
렌더링
WebGL 셰이더, 히스토그램, 클리핑.
인터페이스
패널, 단축키, 작업 기록.
