(무엇을 하는가)
서비스
브랜드를 끌어올리는 세 가지 축 — 구축, 구조, 운영.
STUDIO SION — IN PROCESS웹사이트 구축
기획부터 배포까지 — 성장과 전환으로 이어지는 웹사이트를 풀사이클로 만듭니다.
기획 · IA 설계
레퍼런스 분석과 도메인 리서치로 시작해 와이어프레임·기능요건·콘텐츠 폼까지 문서로 정리합니다. 첫 방문자의 이야기 흐름을 기준으로 정보 구조를 설계해, 화면이 아니라 경험이 먼저 서게 합니다.
Next.js 개발
Next.js와 React, TypeScript 기반의 정적 생성·ISR 구조로 빠르고 안정적인 사이트를 만듭니다. 서버 컴포넌트와 캐시 전략, 에러 바운더리와 폴백까지 실서비스 기준으로 구현합니다.
모바일 · 디테일
모바일 뷰를 기준으로 설계하고 100dvh 풀스크린, iOS safe-area, 상태바 색 일치, 폴드·가로모드까지 대응합니다. 마지막 1px의 디테일이 신뢰를 만든다고 믿습니다.
성능 최적화
폰트 셀프호스팅과 서브셋 프리로드로 FOUT를 제거하고, 이미지·영상을 총량 관리로 압축합니다. 미디어 전체 2.5MB로 오픈한 프로젝트가 그 증거입니다.
UI 아키텍처
화면이 아니라 데이터와 상태의 흐름을 설계합니다. 조직 전체가 같은 언어로 화면을 만들게 하는 구조.
공통 컴포넌트 · 디자인 시스템
버튼 하나까지 상태와 변형을 정의해, 파트가 달라도 같은 화면이 나오게 합니다. 금융권 대규모 개편에서 전 파트 공용 컴포넌트 체계를 설계·구축한 경험이 토대입니다.
모노레포 · 코드 공유
다수 파트가 참여하는 프로젝트의 코드 공유와 의존성 관리 체계를 정비합니다. 저장소 구조는 팀 구조를 비추는 거울이라는 관점으로 규칙부터 설계합니다.
API 상태 흐름 설계
트래픽이 집중되는 화면일수록 상태의 출처와 흐름이 명확해야 합니다. 서버 상태와 클라이언트 상태를 분리하고 상태 전이를 열거 가능하게 만들어 장애를 구조적으로 줄입니다.
웹표준 · 접근성
대형 포털·커머스에서 다져온 7년의 웹표준 개발이 Studio Sion의 토대입니다. WCAG 기준의 시맨틱 마크업으로 누구에게나 동작하는 화면을 기본값으로 만듭니다.
운영 & 자동화
배포가 끝이 아닙니다. 클라이언트가 스스로 운영하는 구조와 자동으로 쌓이는 데이터를 설계합니다.
Notion CMS 연동
병원의 진료일정·휴진 공지·의료진 정보처럼 자주 바뀌는 콘텐츠를 Notion DB로 관리해, 개발자 없이 수정하면 1분 내 사이트에 반영됩니다. 장애 시 코드 내장 기본값으로 후퇴하는 폴백 우선 설계가 기본입니다.
자체 분석 · 리포트 자동화
익명·동일출처 수집 모듈을 자체 구축하고, 매일 24개 지표를 집계해 클라이언트 Notion으로 자동 전송합니다. GA4 없이도 의사결정에 필요한 데이터가 쌓입니다.
SEO · AI 검색(AEO)
JSON-LD 구조화 데이터, 지역 키워드 랜딩, llms.txt 기반 AI 검색 대응까지 — 검색엔진과 AI 모두에게 정확히 읽히는 사이트를 만듭니다.
안정화 · 유지보수
전역 보안 헤더, 레이트리밋, 에러 바운더리, 배포 전 lint·typecheck·build 3중 통과까지. 운영 가이드 문서화와 인수인계로 마무리합니다.
현장에서 온 증거
기획부터 오픈까지, 1인 풀사이클.
레퍼런스 분석·기획·계약·디자인·개발·배포까지 1인 풀사이클로 정식 오픈 — 이후 운영 고도화를 이어가고 있습니다.
개발자 없이 운영되는 사이트.
문구·진료일정·팝업·의료진 정보를 Notion 4개 DB로 관리 — 병원이 직접 수정하면 1분 내 전 표면에 반영됩니다.
매일 아침 도착하는 리포트.
GA4 없이 자체 구축한 익명 분석 모듈이 전환율·이탈률·스크롤 깊이 등 24개 지표를 매일 클라이언트 Notion으로 전송합니다.
프로세스
검증된 프로세스가 결과의 밀도를 만듭니다 — 네 단계, 하나의 흐름.
01
(발견)
맥락을 먼저 읽습니다.
도메인의 업무 규칙, 사용자의 심리, 클라이언트의 요구를 먼저 읽습니다. 레퍼런스 분석과 리서치로 문제를 정의하고, 기획서·기능요건·견적까지 문서로 합의한 뒤에 시작합니다.
금융·여행·교육·커머스·의료 — 낯선 도메인에서도 빠르게 맥락을 잡아온 13년의 훈련이 이 단계를 지탱합니다.
02
(설계)
구조부터 설계합니다.
화면을 그리기 전에 정보 구조와 디자인 토큰, 데이터와 상태의 흐름을 설계합니다. 색과 라운드까지 토큰화된 디자인 시스템 위에서 화면을 조립합니다.
와이어프레임과 시안을 통해 방향을 조율하고, 첫 방문자의 이야기 흐름을 기준으로 페이지를 배치합니다.
03
(개발)
실서비스 기준으로 구현합니다.
웹표준·접근성 기반의 마크업 위에 Next.js / React / TypeScript로 구현합니다. 성능 예산과 미디어 총량을 관리하고, 에러와 장애 상황의 폴백까지 함께 만듭니다.
배포 전 lint·typecheck·build 3중 통과를 관례로 지키며, 법·라이선스 같은 도메인 제약은 코드 레벨에서 강제합니다.
04
(런칭 · 운영)
런칭 후를 함께 설계합니다.
배포 파이프라인과 CMS, 분석 리포트 자동화까지 세팅하고 운영 가이드를 문서로 인수인계합니다. 클라이언트가 개발자 없이 콘텐츠를 운영하는 구조가 목표입니다.
오픈 이후의 개선과 안정화까지 — 사이트가 열린 뒤의 시간을 함께 책임집니다.
궁금한 것들
작업 기간은 보통 얼마나 걸리나요?
랜딩·소개형 사이트는 3~5주, 다페이지·CMS 연동형은 6~10주가 일반적입니다. 범위를 확정한 뒤 일정과 견적을 문서로 먼저 합의합니다.
1인 스튜디오인데 오픈 후 운영·유지보수도 가능한가요?
네. 운영 가이드 인수인계와 폴백 우선 설계로 클라이언트가 직접 운영할 수 있고, 원하시면 별도 유지보수 계약도 가능합니다.
어떤 기술 스택으로 만드나요?
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 기반으로, 정적 생성·서버 컴포넌트·접근성·보안 헤더까지 실서비스 기준으로 구축합니다.
기획·디자인 없이 레퍼런스만 있어도 시작할 수 있나요?
가능합니다. 기획·IA·디자인 시스템·개발·배포·운영 자동화까지 한 흐름으로 진행하므로, 레퍼런스와 목표만으로 시작할 수 있습니다.
SEO나 AI 검색(GEO·AEO) 대응도 포함되나요?
포함됩니다. JSON-LD 구조화 데이터, 메타데이터, 사이트맵, llms.txt까지 검색엔진과 AI 답변엔진 모두에 정확히 읽히도록 마감합니다.
이미 운영 중인 사이트의 개선·리뉴얼도 맡기나요?
가능합니다. 성능·접근성·구조를 먼저 진단해 개선 범위를 제안하고, 부분 리팩터링부터 전면 리뉴얼까지 상황에 맞춰 진행합니다.
지역 제약이 있나요? 원격으로 진행되나요?
서울 기반이며 원격으로 전국·해외 프로젝트를 진행합니다. 문의는 이메일 또는 문의 폼으로 시작합니다.