이 사이트가 만들어진 과정

01 파이프라인한 장을 올리기까지 여덟 단계를 지납니다

각 단계는 앞 단계의 결과를 검사합니다. 통과하지 못하면 다음으로 넘어가지 않고 앞 단계로 돌아갑니다.

01

요구 번역

“이렇게 해주세요”를 화면에서 확인 가능한 조건으로 바꿉니다. 문장으로 남기지 않고, 통과 여부를 판정할 수 있는 형태로 적습니다.

02

설계

페이지 구조·데이터 출처·색과 간격의 기준을 먼저 확정합니다. 쓸 수 있는 사실의 범위를 여기서 못박고, 그 밖의 값은 화면에 올리지 않습니다.

03

구현

설계서에 있는 것만 만듭니다. 설계에 없는 문구·수치·섹션을 임의로 덧붙이지 않고, 필요하면 설계로 돌아가 고칩니다.

04

화면 QA

여러 화면 폭에서 자동으로 열어 가로 스크롤·글자 잘림·스크립트 오류를 확인합니다. 사람 눈으로 훑는 대신 매번 같은 검사를 반복합니다.

05

디자인 비평

만든 사람이 아닌 시선으로 다시 봅니다. 빈 구간, 밀도가 떨어지는 영역, 읽는 순서가 꼬이는 지점을 찾아 되돌립니다.

06

보안 감사

브라우저에 내려가는 응답 헤더, 외부 스크립트, 문의 접수 경로를 점검합니다. 지적은 심각도별로 분류해 남김없이 기록합니다.

07

판정

검사 결과를 모아 통과·조건부·불가로 판정합니다. 만든 사람이 스스로 통과를 선언하지 않고, 검사 결과가 판정합니다.

08

배포 · 재측정

올린 뒤 다시 잽니다. 로컬에서 통과한 것과 실제 주소에서 통과한 것을 따로 확인해, 반영이 끝난 것만 완료로 처리합니다.

아래 02·03·04 는 이 파이프라인을 이 사이트에 실제로 돌린 결과입니다. 각 항목에는 측정값 또는 배포 기록이 붙어 있습니다.

02 실측 ①반응형 · 푸터

실제 주소로 접속해 페이지별·화면폭별로 측정한 값입니다. 기준을 먼저 정하고, 그 기준에 닿을 때까지 고쳤습니다.

코어플래닝랩 사이트 반응형·푸터 실측 결과 — 항목별 기준과 측정값
항목	기준	실측
PC 푸터 높이	165px 이하	497.6 → 150.5px (3.31배 축소)
모바일 푸터 높이	300px 이하	418.8 → 295.9px (1.42배 축소)
가로 오버플로	0	5페이지 × 2뷰포트 전부 0
JS 에러	0	전부 0 (콘솔 error 포함)
터치 타깃 높이	24px 이상	26.0px
인접 링크 간격	6px 이상	8.00px

푸터가 화면을 덜 잡아먹을수록 본문이 먼저 읽힙니다. 모바일에서 링크끼리 붙어 있으면 잘못 눌리기 때문에, 높이뿐 아니라 간격도 함께 기준으로 두었습니다.

성능 모바일 61 · 데스크탑 572026-09-05 측정 접근성 96 · 권장사항 96 · SEO 92모바일 · 데스크탑 동일

이 사이트 첫 화면을 Lighthouse 로 측정한 점수입니다. 회선과 기기에 따라 달라지므로 고정된 값이 아닙니다. 성능 점수를 더 올릴 여지는 06 에 적어 둔 웹폰트 전송량 항목에 남아 있습니다.

03 실측 ②보안 감사, 전과 후

지적을 받은 건수와 처리한 건수를 그대로 적었습니다. 남은 것도 숨기지 않고 06 에 적어 두었습니다.

코어플래닝랩 사이트 보안 감사 결과 — 발견 건수와 조치 결과
구분	값
발견된 지적	18건 (Critical 0 · High 1 · Medium 5 · Low 8 · Info 4)
해소	14건
부분 해소	3건
잔존	1건
조치 불필요(의도적 유지)	1건
수정 중 새로 생긴 결함	0건
배포 후 재측정	CSP 위반 0 · SRI 실패 0 · JS 에러 0 (5페이지 × 2뷰포트)

고치는 과정에서 다른 곳이 조용히 망가지는 일이 잦습니다. 그래서 조치 후 같은 검사를 다시 돌려 신규 결함 0건 을 확인한 뒤에 배포했습니다. 무엇을 고쳤는지는 적되, 어떻게 뚫는지는 적지 않습니다.

04 실측 ③실제로 눌러서 확인한 것들

코드가 있다고 동작하는 것이 아닙니다. 자동화 브라우저로 진짜 클릭해서 화면이 바뀌는지 확인했습니다.

실제 클릭으로 검증한 인터랙션 5종과 결과
인터랙션	결과
프로젝트 모달 열기 / ESC / 바깥클릭 / 닫기버튼	전부 정상
모바일 햄버거 열기 · 닫기	정상
FAQ 아코디언	정상
30초 진단 완주	3단계 완주 후 결과 노출
서비스 탭 전환	정상, 전환 시 세로 이동 0.1px

탭을 눌렀을 때 버튼이 위아래로 튀면 다음 것을 누르기 어렵습니다. 그래서 전환 전후의 좌표를 재서 세로 이동이 0.1px 인지까지 확인했습니다.

05 배포 이력무엇을 언제 바꿨는지

한 번에 다 고치지 않고, 바꾼 것과 그 결과를 나눠 기록합니다. 문제가 생기면 어느 지점으로 되돌릴지가 분명해집니다.

01

푸터 3행 압축 3258495

세로로 길게 늘어지던 푸터를 세 줄로 접었습니다. 이 변경의 결과가 02 표의 푸터 높이 수치입니다.

02

보안 헤더 1차 적용 a08ca6c

브라우저에 내려보내는 응답 헤더를 표준 권고에 맞춰 붙이고, 외부에서 불러오는 스크립트에 무결성 검사를 걸었습니다.

03

인라인 스크립트 제거 · 외부 폼 서비스 정리 dc29648

페이지 안에 섞여 있던 스크립트를 전부 파일로 빼내 실행 정책을 조였고, 문의 접수를 외부 폼 서비스 없이 자체 경로 하나로 정리했습니다.

위 값은 배포에 사용한 변경 기록의 짧은 식별자입니다. 어떤 변경이 어떤 수치를 만들었는지 서로 대조할 수 있게 남겨 둡니다.

06 정직 고지아직 남아 있는 것들

여기에 적지 않으면 아무도 모릅니다. 그래서 적습니다. 다음 작업에서 처리할 항목입니다.

버튼과 텍스트가 스치는 구간

데스크탑에서 카카오 상담 버튼과 사업자정보 텍스트의 경계 상자가 약 5px 스칩니다. 글자가 가려지지는 않습니다.

태블릿 폭 푸터 간격

태블릿 폭(768px)에서 푸터 메뉴 간격이 좁습니다. 간격 수정이 520px 이하 화면에만 적용돼 있습니다.

웹폰트 전송량

웹폰트 전송량이 큽니다. 실제로 쓰는 글자만 남기는 서브셋 적용이 아직 남아 있습니다.

문의 메일 실도착

문의 메일이 실제로 도착하는지는 실제 1건 발송으로 확인해야 확정됩니다.

이 목록은 사라지지 않습니다. 처리하면 처리한 대로, 남으면 남은 대로 갱신합니다.

같은 방식으로 만들어 드립니다

만들고 끝내지 않고, 이 페이지처럼 무엇을 어떻게 확인했는지 함께 드립니다.

내 사이트도 이렇게 만들기 만든 결과물 보기

이 사이트는 이렇게 만들어졌습니다.