이 페이지가포트폴리오입니다.
보여 드릴 사례를 따로 만들지 않았습니다. 지금 보고 계신 이 사이트를 같은 기준으로 만듭니다.
- 분기점
- 8
- 개 폭에서 가로 스크롤 0
- 본문 대비
- AA
- 이상 · 실제 배경색 기준 측정
- 폰트
- 2
- 종 자체 호스팅 · 서브셋
- 자동 검증
- 196
- 개 테스트 통과 후 배포
※ 위 값은 이 사이트에 적용된 기준이며, 프로젝트마다 합의해 정합니다.
홈페이지 제작과 비즈니스 웹사이트는 다릅니다.
같은 결과물처럼 보이지만 무엇을 먼저 정하느냐가 다릅니다.
axis
홈페이지를 만드는 일
비즈니스 웹사이트를 만드는 일
출발점
디자인 시안을 고르고 그대로 옮긴다
문의로 가는 경로를 먼저 정한다
범위 기준
페이지 수와 기능 목록으로 정한다
방문자가 던지는 질문 수로 정한다
오픈의 의미
오픈하면 작업이 끝난다
오픈이 측정의 시작이다
모바일
데스크톱을 줄여서 보여준다
모바일 고유의 조판을 따로 설계한다
검색 노출
오픈 후에 따로 논의한다
구조·메타데이터를 설계 단계에 넣는다
품질 검증
문제가 생기면 본다
배포 조건으로 자동 검증한다
여덟 단계로 만듭니다.
각 단계의 산출물이 다음 단계의 입력이 됩니다. 앞 단계를 건너뛰면 뒤에서 되돌아옵니다.
01
전략
이 사이트가 해야 할 단 하나의 일과 방문자가 실제로 던지는 질문을 정리합니다.
질문 목록 · 목표
02
정보 구조
질문의 순서대로 화면과 route 를 정합니다. 대응하는 질문이 없는 페이지는 만들지 않습니다.
사이트맵 · route
03
디자인 시스템
색·타이포·간격·라운드·모션을 토큰으로 먼저 정의합니다. 화면마다 값을 새로 정하지 않기 위한 작업입니다.
토큰 정의
04
화면 설계
정의된 토큰만으로 화면을 만듭니다. 섹션마다 폭과 밀도를 바꿔 스크롤 리듬을 만듭니다.
화면 시안
05
개발
서버 렌더링을 기본으로 하고 상호작용이 있는 곳만 클라이언트로 만듭니다.
구현 코드
06
SEO
메타데이터·sitemap·robots·구조화 데이터를 붙입니다. 도메인이 확정되기 전에는 색인을 막아 둡니다.
메타 · 구조화 데이터
07
검증
분기점별 반응형, 텍스트 대비, 키보드 이동, 감소된 모션을 실제로 측정합니다.
검증 리포트
08
인계 · 운영
콘텐츠를 어디서 고치는지, 무엇을 다시 실행해야 하는지 문서로 넘깁니다.
운영 문서
배포 조건으로 검증하는 항목
눈으로 보고 판단하지 않습니다. 통과하지 못하면 배포되지 않습니다.
반응형
자동 검사여덟 개 폭에서 자동 검사합니다. 가로 스크롤이 없는지, 제목 줄바꿈이 의미 단위를 지키는지 봅니다. (360 · 390 · 480 · 768 · 1024 · 1280 · 1440 · 1920px)
접근성
자동 검사모든 텍스트의 실제 대비를 배경 색까지 계산해 검사합니다. 키보드 이동·포커스 표시·감소된 모션도 포함합니다.
성능
설계 단계폰트를 자체 호스팅하고 실제 쓰는 글리프만 남깁니다. 서버 컴포넌트를 기본으로 해서 클라이언트 자바스크립트를 줄입니다.
한글 조판
설계 단계어절 중간 줄바꿈을 막고, 제목의 줄바꿈을 직접 설계합니다. 자간·행간을 라틴 기준으로 두지 않습니다.
진행 절차
01
요구 정리
목표와 방문자 질문을 정리하고 범위를 확정합니다.
02
구조 · 시스템
정보 구조와 디자인 토큰을 먼저 만듭니다.
03
화면 개발
대표 화면을 완성해 확인받고 나머지로 확장합니다.
04
검증
반응형 · 접근성 · 성능을 측정하고 결과를 공유합니다.
05
배포 · 인계
배포하고 운영 방법을 문서로 넘깁니다.
받는 것
- 전략 문서 — 이 사이트가 해야 할 일과 방문자 질문 목록
- 정보 구조 및 route 설계
- 디자인 토큰 정의 (색 · 타이포 · 간격 · 라운드 · 모션)
- 전체 화면 개발 (반응형 포함)
- SEO 기본 구성 (메타데이터 · sitemap · robots · 구조화 데이터)
- 자동 검증 테스트 (반응형 · 접근성)
- 운영 인계 문서
포함되지 않음
- 콘텐츠(카피 · 사진 · 영상) 원본 제작 — 별도 논의
- 광고 집행 및 매체 운영
- 검색 순위를 보장하는 형태의 약속