50대 이상 방문자가 주로 보는 홈페이지라면 글자는 몇 px부터 써야 하고, 글자 대비와 버튼 크기는 얼마나 되어야 할까요. 이 글은 고령층 접근성 기준 네 가지에서 웹 화면에 해당하는 항목 37개를 뽑아 점검표로 만들고, 가상의 시니어 유학원 홈페이지 데모에 적용해 잰 값을 정리한 것입니다. 2026년 10월 2일 첫 점검에서 걸린 7곳을 고친 뒤 다시 잰 판정은 충족 33개, 부분 1개, 사람이 확인해야 할 것 3개입니다.
결론부터 적으면, 데모 화면 12곳(데스크톱 7곳, 휴대폰 5곳)을 Chrome으로 열어 잰 결과 가장 작은 글자는 19px, 가장 낮은 글자 대비는 7.07:1, 가장 작은 버튼은 65×48px(너비×높이)였습니다. 한 줄 길이와 가로 넘침은 판정용 측정 스크립트가 따로 쟀습니다. 데스크톱의 처음 화면·회사 소개·상세 3곳에서 가장 긴 줄은 39자였고, 방문자 화면 4곳과 관리자 화면 2곳 모두 320px 폭과 200% 확대에서도 가로 넘침이 없었습니다. 아래 표의 기준과 재는 방법은 다른 시니어 대상 사이트를 점검할 때도 그대로 써 볼 수 있습니다.
데모는 가상 회사와 합성 데이터로 만든 독립 데모입니다. 공개된 외주 공고 하나를 출발점으로 삼았지만 의뢰받거나 계약한 작업이 아니며, 공고와의 대조는 글 끝 부록에 줄여 두었습니다. 시니어 유학원 홈페이지 데모에서 글자 크기 버튼, 상품 목록과 상세, 카카오톡 상담 버튼, 관리자 편집 화면을 직접 눌러 볼 수 있습니다.
숫자로 정한 기준과 잰 값
2026년 10월 2일에 스크립트 두 가지로 쟀습니다. 글자 크기·글자 대비·누름 영역은 데스크톱 1440px 화면 7곳과 휴대폰 390px 화면 5곳을 Chrome으로 자동으로 열어 쟀고, 화면마다 가장 나쁜 값을 모았습니다. 줄 간격·한 줄 길이·휴대폰 머리글 비율·가로 넘침은 판정용 측정 스크립트가 따로 쟀습니다. 가로 넘침은 방문자 화면 4곳과 관리자 화면 2곳, 모두 6곳이 대상입니다. 버튼 사이 간격은 화면에서 재지 않고 CSS 코드 값으로 확인했습니다.
| 항목 | 잰 값 | 비교한 기준 |
|---|---|---|
| 가장 작은 글자 | 19px(14.25pt). 본문은 20px | 14포인트 이상 (서울디지털재단 지침 1) |
| 가장 낮은 글자 대비 | 7.07:1 (관리자 편집 화면의 오류 요약). 방문자 화면만 보면 8.07:1 | WCAG 1.4.6 7:1, KWCAG 5.4.3 4.5:1 |
| 가장 작은 누름 영역 | 65×48px (너비×높이, 휴대폰의 글자 크기 버튼) | WCAG 2.5.5 44×44px |
| 버튼 사이 간격 | 12px (메뉴·글자 크기·필터 버튼) | ‘충분한 간격’ (서울디지털재단 지침 7) |
| 줄 간격 | 본문 1.7배 (20px 글자에 34px) | WCAG 1.4.8 1.5배 이상 |
| 한 줄 길이 | 데스크톱 가장 긴 줄 39자 | WCAG 1.4.8 한중일 글자 40자 이하 |
| 휴대폰 첫 화면의 머리글 | 화면 높이의 34%. 가장 큰 글자에서는 53% | 35% 이하 (외부 기준이 없어 이 데모에서 정한 목표) |
| 가로 넘침 | 6개 화면 모두 0px (320px 폭, 200% 확대, 가장 큰 글자, 글자 간격 강제) | WCAG 1.4.4·1.4.10·1.4.12 |
기준 숫자를 웹 단위로 옮길 때 정해야 할 것이 있습니다. ‘14포인트’를 CSS 포인트로 계산하면 18.67px(14×96÷72)이고, 앱처럼 1pt를 1px로 보면 14px입니다. 이 데모는 더 엄한 18.67px를 기준으로 잡아 그보다 작은 글자가 화면에 하나도 없는지 찾았습니다. 200% 확대는 1440px 화면의 절반인 720px 폭으로 대신 쟀고, 글자 간격은 WCAG 1.4.12의 값(줄 간격 1.5배, 자간 0.12em, 어간 0.16em, 문단 아래 2em)을 강제로 넣은 뒤 넘침과 잘림을 봤습니다. 한 줄 길이는 문단 폭을 한글 한 글자의 폭으로 나눠 셌고, 휴대폰 머리글 비율은 390×844 화면에서 본문이 시작하는 높이를 화면 높이로 나눈 값입니다.
기본 글자는 20px이고, 머리글의 글자 크기 버튼으로 22px·24px까지 키울 수 있으며 고른 크기는 다음 방문에도 유지됩니다. 글자 크기는 브라우저 기본 글자 크기에 비례하는 단위로 잡아 두었습니다. 휴대폰의 큰 글꼴 설정에서 실제로 함께 커지는지는 실기기로 아직 보지 않았습니다.
고령층 기준 37개 항목 판정표
기준은 서울디지털재단의 「고령층 친화 디지털 접근성 표준」 10대 지침(2021), 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022), W3C의 고령자 대응표와 WCAG 2.2, NN/g의 고령 사용자 연구(2019)입니다. 여기서 웹 화면에 해당하는 항목 37개를 뽑아 자동 측정, 화면 확인, 코드 대조로 판정했습니다. 서울디지털재단 표준은 원문을 구하지 못해 보도와 요약으로만 확인했으므로, 표에서 ‘서울 지침’으로 적은 기준은 원문과 표현이 다를 수 있습니다.
번호 앞 글자는 분야입니다. A 글자, B 화면 요소, C 구조, D 용어, E 상태 표시, F 누를 곳, G 조작, H 피드백, I 실수 막기, J 심리적 부담, K 화면 낭독기와 실제 사용입니다. 판정 표시는 ✅ 충족, 🟡 부분, 👤 사람 확인 필요이고, 기준 칸의 ‘판단’은 외부 기준이 없어 이 데모에서 정한 항목입니다.
| 번호 | 점검 | 기준 | 데모 결과 | 판정 |
|---|---|---|---|---|
| A1 | 글자 크기 | 서울 지침 1, 14포인트 이상 | 본문 20px, 가장 작은 글자 19px | ✅ |
| A2 | 글자 키우기·화면 확대 | WCAG 1.4.4·1.4.10 | 글자 크기 3단계, 200% 확대·320px 폭·가장 큰 글자에서 가로 넘침 없음 | ✅ |
| A3 | 명도 대비 | KWCAG 5.4.3 4.5:1, WCAG 1.4.6 7:1 | 화면 12곳 가장 낮은 대비 7.07:1 | ✅ |
| A4 | 단순한 글꼴 | 서울 지침 1 | 시스템 고딕, 기울임·흘림 없음 | ✅ |
| A5 | 줄 간격 | WCAG 1.4.8 1.5배 | 본문 1.7배 | ✅ |
| A6 | 한 줄 길이 | WCAG 1.4.8 40자 이하 | 데스크톱 가장 긴 줄 39자 | ✅ |
| A7 | 글자 간격을 넓혀도 안 깨짐 | WCAG 1.4.12 | 줄·문단·자간·어간을 넓혀도 넘침 없음 | ✅ |
| B1 | 화면마다 꼭 필요한 것만 | 서울 지침 2 | 메뉴 4개, 카드 최대 6개, 광고·팝업 없음 | ✅ |
| B2 | 휴대폰 첫 화면 | 서울 지침 2 | 머리글 34% (가장 큰 글자 53%) | ✅ |
| B3 | 맞춤 기능 | 서울 지침 2 | 고른 글자 크기를 기억 | ✅ |
| C1 | 같은 자리 같은 메뉴 | WCAG 3.2.3 | 모든 화면 같은 머리글 | ✅ |
| C2 | 지금 어디인지 | WCAG 2.4.8 | 메뉴 강조와 위치 표시 | ✅ |
| C3 | 되돌아가기 | 서울 지침 3 | 뒤로 가기에 고른 조건 유지, ‘목록으로’ | ✅ |
| C4 | 화면 제목·언어 | KWCAG 6.4.2·7.1.1 | 화면마다 다른 제목, 한국어 표시 | ✅ |
| C5 | 반복 영역 건너뛰기 | KWCAG 6.4.1 | 첫 Tab이 ‘본문 바로가기’ | ✅ |
| D1 | 쉬운 한글 | 서울 지침 4 | 상담 버튼 근처는 ‘카카오톡 상담 채팅방’으로 풀어 씀 | ✅ |
| D2 | 비용·기간 표기 | 판단 | ‘480만 원’, ‘4주 (28일)’, 미정은 ‘상담 후 안내’ | ✅ |
| E1 | 고른 조건과 결과 | 서울 지침 5 | 채운 버튼, 결과 개수 문장, 버튼마다 남을 개수 | ✅ |
| E2 | 누르면 생길 일 미리 알림 | 서울 지침 5 | 상담 버튼 가까이에 안내 문장 | ✅ |
| F1 | 링크·버튼 구분 | 서울 지침 6 | 버튼은 채운 색, 글 속 링크는 밑줄 | ✅ |
| F2 | 아이콘만 있는 버튼 없음 | 서울 지침 6 | 아이콘에도 글자를 붙임 | ✅ |
| F3 | 이미 본 프로그램 구분 | 판단 | 방문한 이름을 보라색으로 | ✅ |
| G1 | 누름 영역 | WCAG 2.5.5 44px, KWCAG 6.1.3 대각선 6.0mm | 가장 작은 버튼 65×48px(너비×높이) | ✅ |
| G2 | 버튼 사이 간격 | 서울 지침 7 | 12px | ✅ |
| G3 | 한 번 누르기로 충분 | KWCAG 6.5.1 | 끌기·두 손가락·길게 누르기 없음 | ✅ |
| G4 | 키보드만으로 사용 | KWCAG 6.1.1·6.1.2, WCAG 2.4.7 | 상담 열고 닫기·필터 동작, 초점 테두리 4px | ✅ |
| H1 | 누른 결과를 바로 알림 | 서울 지침 8 | 복사 완료 문장, 필터 결과 문장 | ✅ |
| I1 | 닫기·되돌리기 | 서울 지침 9 | 닫기 버튼·Esc·바깥 누르기 | ✅ |
| I2 | 시간 제한·자동 넘김 없음 | KWCAG 6.2.1·6.2.2·6.3.1, WCAG 2.2.1 | 없음 | ✅ |
| I3 | 갑자기 새 창 없음 | KWCAG 7.2.1 | 새 창 없음 | ✅ |
| I4 | 오류 안내 | KWCAG 7.3.1, NN/g | 관리자 화면에서 칸 옆과 위 요약에 이유 표시 | ✅ |
| J1 | 친절한 설명 | 서울 지침 10 | 진행 순서 5단계, 보낼 문구 복사 | ✅ |
| J2 | 연락처 | 서울 지침 10 | 카카오톡 하나뿐, 전화·상담 시간 없음 | 🟡 |
| K1 | 대체 텍스트 | KWCAG 5.1.1 | 그림마다 설명 문장 | ✅ |
| K2 | 화면 낭독기로 듣기 | W3C 고령자 대응표 | 하지 않음 | 👤 |
| K3 | 휴대폰 큰 글꼴 설정 | WCAG 1.4.4 | 브라우저 기본 글자 크기를 따르게 만들었지만 실기기로는 보지 않음 | 👤 |
| K4 | 시니어 과업 시험 | NN/g | 하지 않음 | 👤 |
F3의 보라색(#6b2fa0)은 흰 바탕에서 대비 8.27:1입니다. 다만 브라우저가 방문 기록을 스크립트에 숨기기 때문에 이 항목은 자동으로 재지 못하고 코드로만 확인했습니다. J2는 실제 운영자가 정할 일입니다. 출발점이 된 공고에는 카카오톡 오픈채팅만 적혀 있었지만, 카카오톡을 어려워하는 방문자를 위해 전화번호와 상담 가능 시간을 함께 둘지 정해야 합니다.
첫 점검에서 걸린 7곳과 고친 방법
같은 날 첫 점검의 결과는 충족 26개, 부분 6개, 미적용 2개, 사람 확인 3개였습니다. 부분·미적용으로 나온 곳 가운데 운영자에게 물어야 하는 연락처(J2)를 빼고 아래 7곳을 고쳤습니다. 고칠 때는 측정 시험을 먼저 바꾼 뒤 화면을 고쳤습니다.
| 고친 곳 | 고치기 전 | 고친 뒤 |
|---|---|---|
| 가장 작은 글자 (A1) | 18px(13.5pt) | 19px(14.25pt), 14pt보다 작은 글자 없음 |
| 데스크톱 한 줄 길이 (A6) | 62~68자 | 가장 긴 줄 39자 (문단 최대 폭을 34em으로 제한) |
| 휴대폰 첫 화면의 머리글 (B2) | 화면의 45%(379px) | 34%(286px) (데모 안내 띠를 한 줄로, 메뉴와 글자 크기 줄을 좁힘) |
| 누르면 생길 일 (D1·E2) | 누른 뒤 대화 상자에서만 안내 | 상담 버튼 가까이에 ‘누르면 카카오톡 상담 채팅방이 열립니다’ |
| 이미 본 프로그램 (F3) | 구분 없음 | 방문한 프로그램 이름을 보라색으로 |
| 버튼 사이 간격 (G2) | 7~10px | 12px |
| 관리자 편집, 320px·가장 큰 글자 | 가로 20px 넘침 | 넘침 없음 (입력 묶음과 격자의 최소 폭을 풂) |
Chrome 검사 112건, 판정 측정 8개, 단위 시험 42건
측정과 시험은 세 겹이고 모두 스크립트로 돌렸습니다. 첫째는 설치된 Chrome을 화면 없이 띄워 실제 화면을 조작하는 검사 112건입니다. 화면 12곳에서 보이는 글자 조각을 하나씩 돌며 글자 크기를 읽고, 글자색과 그 뒤 바탕색의 대비를 WCAG 공식으로 계산해 가장 낮은 값을 남깁니다. 버튼·메뉴·입력 칸은 화면에 그려진 높이와 너비를 잽니다.
같은 검사가 기능 흐름도 확인합니다. 처음 화면의 일반 상담, 목록 필터, 상세 이동, 상담 대화 상자(이동·새 창 없음, 클립보드 복사), 새로고침 뒤 글자 크기 유지, 새 상품 추가·수정·삭제, 상담 링크 거부와 변경, 처음 상태로 되돌리기, 저장소 차단·깨진 저장값·용량 초과까지입니다. 112건 모두 실패 없이 통과했고, 공개 주소에 올린 데모에서도 같은 112건이 통과했습니다. 이 글의 화면 이미지는 이 검사 중에 저장한 것입니다.
둘째는 판정표를 위한 측정 스크립트로, 판정 8개를 따로 잽니다. 가장 작은 글자, 한 줄 길이, 휴대폰 머리글 비율, 네 가지 조건의 가로 넘침, 뒤로 가기 뒤 필터 유지, 키보드 조작(본문 바로가기·상담·필터), 화면 제목, 화면 확대 허용입니다. 하나라도 어긋나면 실패로 끝나게 해 두었습니다. 고친 곳 가운데 글자 크기·한 줄 길이·머리글 비율·관리자 화면 넘침은 다시 나빠지면 이 측정에서 바로 드러납니다. 상담 버튼 가까이의 안내 문장(D1·E2)은 아래 단위 시험이 확인하고, 보라색 표시(F3)와 버튼 사이 간격(G2)은 자동 시험 없이 코드로만 확인했습니다.
셋째는 데이터 규칙과 화면 문자열을 Node.js로 시험하는 단위 시험 42건입니다. 필수 칸과 글자 수 한도, 비용 범위, 이미지 형식(준비된 그림이나 JPG·PNG·WebP 데이터만 허용하고 javascript: 주소나 SVG 데이터는 거부), 상담 링크 허용 2가지와 거부 12가지, 저장소가 비었거나 깨졌거나 꽉 찼거나 차단된 경우를 봅니다. 관리자가 <img onerror> 같은 글자를 넣어도 모든 화면에서 글자로만 나오는지도 확인합니다. 이 글을 고치며 2026년 10월 8일에 다시 돌린 결과도 42건 모두 통과였습니다.
시험이 잡아낸 문제도 있었습니다. 글자 크기 값을 문서 맨 위 요소에 버튼과 같은 속성 이름으로 붙였더니, 클릭 처리기가 모든 클릭을 글자 크기 버튼으로 오인해 문구 복사·닫기·삭제 확인 버튼이 동작하지 않았습니다. 단위 시험으로는 보이지 않던 문제라 Chrome 검사에서 처음 드러났고, 속성 이름을 나눠 고쳤습니다. 저장한 화면 이미지를 열어 보고는 처음 화면 큰 그림과 나라 카드 그림이 겹치는 것, 데스크톱 상세에서 상담 버튼이 첫 화면 아래 끝에 걸리는 것, 사진을 올린 뒤에도 앞선 오류의 빨간 테두리가 남는 것, 휴대폰 메뉴 일부가 버튼처럼 보이지 않는 것을 찾아 고쳤습니다. 별도의 내장 브라우저에서도 375px 폭으로 상세 화면을 열어 가로 넘침이 없고 상담 버튼이 화면 아래에 붙어 있는지 확인했습니다.
자동 측정으로 알 수 없는 것
판정표의 👤 세 가지는 스크립트로 대신할 수 없어 아직 하지 않았습니다. 실제 시니어 대상 사이트를 만든다면 아래처럼 시험해 볼 수 있습니다. 합격 기준은 판단으로 정한 안이며 운영자와 다시 정해야 합니다.
| 항목 | 내용 |
|---|---|
| 대상 | 60세 이상 5명 안팎, 본인 휴대폰을 평소 글꼴 설정 그대로 |
| 과업 | ① 몰타의 여행 프로그램 찾기 ② 오클랜드 연수의 기간과 비용 말하기 ③ 글자 키우기 ④ 상담 버튼을 눌러 채팅방에 보낼 문구 준비하기 |
| 볼 것 | 혼자 끝냈는지, 걸린 시간, 멈춘 곳, 잘못 누른 곳, 소리 내어 말한 불편 |
| 함께 할 것 | VoiceOver(아이폰)·TalkBack(안드로이드)로 처음 화면에서 상세, 상담까지 들어 보기 |
| 합격 기준(안) | 과업마다 5명 중 4명 이상 혼자 성공 |
개발 지식이 없는 직원이 관리자 화면을 쓰는 시험도 같은 방식으로 할 수 있습니다. 상품 1개 추가, 사진 바꾸기, 삭제를 과업으로 줍니다.
프로그램 안내·카카오톡 상담·관리자 편집 화면
방문자 화면은 처음 화면, 회사 소개, 프로그램 안내, 상세 네 가지입니다. 프로그램 안내에서는 나라(뉴질랜드·몰타)와 종류(유학·여행)를 눌러 거르고, 버튼 이름 옆에 누르면 남을 개수를 붙여 두어 누르기 전에 결과를 알 수 있습니다. 고른 조건은 주소에 남아서 뒤로 가기와 새로고침에도 유지됩니다. 상세 화면은 기간·출발 시기·예시 비용·대상·숙소·활동 강도를 ‘한눈에 보기’로 묶고, 일정과 포함·불포함 사항, 같은 나라의 다른 프로그램을 보여 줍니다. 비용은 ‘4,800,000원’ 대신 ‘480만 원’처럼 만 원 단위로 쓰고, 한국어 줄바꿈이 낱말 중간에서 끊기지 않게 했습니다. 아이콘만 있는 버튼이나 저절로 넘어가는 슬라이드는 쓰지 않았습니다.
상담 버튼은 처음 화면, 회사 소개, 상세에 있고 휴대폰에서는 상세 화면 아래에 고정됩니다. 실제 사이트라면 누르는 순간 카카오톡 오픈채팅방이 열리겠지만, 이 데모는 실제 채팅방으로 보내지 않고 대화 상자로 그 과정을 보여 줍니다. 관리자가 정한 연결 주소와 함께 “‘오클랜드 4주 시니어 영어 연수’ 상담을 원합니다.” 같은 문구를 보여 주고, 문구 복사하기를 누르면 클립보드에 담깁니다. 채팅방에서 상품 이름을 직접 치지 않아도 되게 하려는 장치입니다.
관리자 화면 미리보기에서는 상품을 추가·수정·삭제합니다. 입력 칸은 나라·종류·이름·한 줄 소개·기간·출발 시기·예시 비용·대상·숙소·활동 강도·일정·포함·불포함·대표 이미지·이미지 설명 15개이고, 별표가 붙은 7개는 꼭 적어야 합니다. 적는 동안 오른쪽에 방문자에게 보일 카드와 상세 요약이 바로 바뀝니다. 빠뜨린 칸이 있으면 저장할 때 위에 오류 목록이 나오고, 목록을 누르면 그 칸으로 이동합니다. 사진은 JPG·PNG·WebP 10MB까지 올릴 수 있고 긴 쪽 1200px JPEG로 줄여 저장합니다. 삭제 전에는 한 번 더 묻고, 카카오톡 상담 링크는 한 곳에서 바꾸면 모든 상담 버튼에 반영됩니다.
상품 사진 자리는 코드로 그린 예시 그림 6장으로 채우고, 그림마다 ‘예시 그림 · 실제 사진을 넣을 자리’라고 적어 실제 사이트에서 바꿔야 할 곳을 표시했습니다. 사생활 보호 창처럼 브라우저 저장소를 쓸 수 없거나, 저장값이 깨졌거나, 저장 공간이 모자라면 화면은 그대로 동작하되 그 이유를 알립니다.
비용 표기·상담 링크 검사·사진 줄이기 예시
아래 입력은 모두 단위 시험이나 Chrome 검사에 들어 있는 값입니다.
| 입력 | 결과 |
|---|---|
예시 비용 4,800,000 | 방문자 화면에 ‘480만 원’ |
예시 비용 4850500 | ‘485만 500원’ |
| 예시 비용 빈칸 | ‘상담 후 안내’ |
예시 비용 480만 | 저장하지 않고 숫자만 적어 달라고 안내 |
상담 링크 https://open.kakao.com/o/test1234 | 저장하고 모든 상담 대화 상자에 새 주소 표시 |
상담 링크 http://open.kakao.com/o/abc | 거부 (https 주소만 허용) |
상담 링크 https://open.kakao.com.evil.example/o/abc | 거부 (카카오 주소가 아님) |
| 2400×1600 JPG 사진 (합성 사진) | 1200×800 JPEG로 줄여 저장, 저장 크기 약 29KB |
| 글자 파일(.txt), 손상된 JPG | 거부하고 이유 안내 |
| 아무것도 적지 않고 저장 | 오류 7곳 목록, 누르면 해당 칸으로 이동 |
방문자 쪽에서는 프로그램 안내에서 나라를 몰타로 고르면 3개, 종류를 여행까지 고르면 ‘고조섬 해안 걷기 8일 여행’ 하나만 남습니다. 새로 추가한 상품을 뉴질랜드로 올리면 뉴질랜드 목록이 4개로 늘고, 상세에는 올린 사진과 ‘295만 원’처럼 줄여 쓴 비용이 나옵니다.
글자 크기부터 관리자 편집까지 눌러 보는 순서
- 데모를 엽니다. 머리글 오른쪽 글자 크기에서 기본·크게·더 크게를 골라 봅니다.
- 프로그램 안내에서 나라와 종류를 눌러 거르고, 카드를 눌러 상세로 들어갑니다.
- 상세에서 카카오톡으로 상담하기를 누릅니다. 연결될 주소와 보낼 문구가 나오고, 문구 복사하기로 문구를 복사할 수 있습니다. 실제 채팅방은 열리지 않습니다.
- 메뉴의 관리자 미리보기에서 새 상품 추가를 누르고 칸을 채웁니다. 사진을 올리면 오른쪽 미리보기가 바로 바뀝니다. 저장하기를 누른 뒤 방문자 화면에서 보기로 결과를 확인합니다.
- 목록의 수정·삭제와 아래쪽 카카오톡 상담 링크도 바꿔 봅니다. 끝나면 처음 상태로 되돌리기를 누릅니다. 바꾼 내용은 이 브라우저에만 남습니다.
이 데모가 못 하는 것과 아직 하지 않은 시험
이 데모는 브라우저에서만 동작하는 정적 웹 페이지입니다. 워드프레스·아임웹 사이트도, 관리자 로그인도 없습니다. 관리자 화면에서 바꾼 내용은 그 브라우저의 저장소(localStorage)에만 남고 다른 방문자에게는 보이지 않습니다. 상품은 30개까지 둘 수 있고, 올린 사진은 긴 쪽 1200px로 줄여 저장하며, 브라우저 저장 공간이 모자라면 저장하지 않습니다.
상담 버튼은 실제 카카오톡 오픈채팅방을 열지 않습니다. 링크 검사는 https://open.kakao.com/o/ 뒤에 영문·숫자 코드가 붙은 형태인지만 보고, 그 방이 실제로 있는지는 확인하지 않습니다. 기본 주소 https://open.kakao.com/o/demo0000은 형식만 맞춰 지어낸 예시입니다.
읽기 쉬움은 고령층 기준 37개 항목을 자동 측정과 화면·코드 확인으로 점검했을 뿐, 시니어 사용자에게 써 보게 하거나 화면 낭독기로 전체를 점검하지는 않았습니다. 비개발 직원이 관리자 화면을 실제로 쉽게 쓰는지도 시험하지 않았습니다. 대비 측정은 글자 뒤의 배경색만 계산에 넣으므로, 사진 위에 글자를 얹는 화면이라면 따로 확인해야 합니다. 서울디지털재단 표준은 원문과 대조하지 못했습니다.
회사 이름·소개·프로그램·일정·비용은 모두 지어낸 것이며 실제 학교·여행사나 나라별 비자·보험 정보와 관계없습니다. 대표 이미지는 코드로 그린 예시 그림입니다. 데모 페이지는 가상 회사가 실제 업체처럼 검색되지 않도록 검색 제외(noindex)로 두었습니다.
부록. 시니어 유학원 공고의 요구 20개와 맞춰 본 결과
이 데모의 출발점은 위시켓에 올라온 ‘워드프레스 기반 시니어 대상 유학원 신규 웹사이트 구축’ 공고입니다. 2026년 10월 2일 11시 58분에 요구사항을 확인했고, 그때는 모집 중(마감 10월 15일)이었습니다. 직접 의뢰받거나 계약한 작업이 아니며, 공고 고객의 회사 소개 문구·상품 사진·카카오톡 링크는 받지도 쓰지도 않았습니다.
| 원 공고 요구 | 이 데모 | 상태 |
|---|---|---|
| 회사 소개·프로그램 안내 페이지 | 가상 회사 소개(약속 3가지·진행 순서 5단계), 나라·종류로 거르는 프로그램 안내 | 구현 (문구는 가상) |
| 2개국·각 3개 상품의 목록과 상세 | 뉴질랜드·몰타 가상 프로그램 6개 | 구현 |
| 결제 없이 카카오톡 오픈채팅으로 이어지는 상담·예약 버튼 | 연결될 주소와 보낼 문구를 보여 주는 예시 흐름 | 부분 (실제 채팅방은 열지 않음) |
| 시니어를 고려한 가독성, 모바일 반응형 | 위 판정표와 측정값 | 구현 (사용자 시험은 안 함) |
| 개발 지식 없이 상품 이미지·텍스트 추가·수정·삭제 | 관리자 화면 미리보기 | 구현 (이 브라우저에만 저장) |
| 카카오톡 상담 링크 변경 | 한 곳에서 바꾸면 모든 상담 버튼에 반영 | 구현 (이 브라우저에만 저장) |
| 워드프레스 세팅·개발, 아임웹과 비교한 제안 | 없음 (정적 웹 데모) | 범위 밖 |
| 디자인 원본·소스 일체·관리자 매뉴얼 | 데모 소스와 관리자 화면 안의 사용 안내 5단계 | 일부 |
요구를 낱개 20개로 나눠 대조하면 반영 10개, 부분 반영 7개, 미반영 3개입니다(반영 1점·부분 0.5점으로 계산하면 68%). 부분·미반영 10개의 원인은 고객 자료가 필요한 것 4개, 플랫폼이 다른 것 3개, 실제 사용자 확인이 필요한 것 2개, 납품 형태가 다른 것 1개입니다. 이 숫자는 공고 요구와 독립 데모를 대조한 결과이며 실제 납품물의 완성도를 뜻하지 않습니다.
실제 사이트로 옮긴다면 그대로 가져갈 수 있는 것은 상품 입력 항목 15개, 화면 순서, 이 글의 점검표입니다. 워드프레스라면 ‘프로그램’ 글 유형을 따로 만들고 기간·예시 비용·일정 같은 칸을 정해 두는 방식이 데모의 관리자 화면과 가장 가깝습니다. 직원은 정해진 칸만 채우면 되고 상품 화면 모양도 흐트러지지 않습니다. 카카오톡 상담 링크는 사이트 설정 한 곳에 두어 모든 버튼이 같은 주소를 읽게 합니다.
AI 도구(Claude Code)로 만든 범위
공고 요구 정리, 화면 시안, 데모 코드, 예시 그림, 자동 시험, Chrome 검사 스크립트, 고령층 기준 정리와 판정표, 이 글의 초안을 AI 코딩 도구(Claude Code)로 작성했습니다. 사람은 후보를 고르고, 화면 시안을 보고 예시 그림을 쓰되 ‘실제 사진을 넣을 자리’를 표시하도록 정했습니다. 시니어 기준 점검과 보강도 사람이 요청했고, 화면과 글을 검토한 뒤 공개를 결정했습니다. 판정표와 측정값을 글 앞으로 옮기고 공고 대조를 부록으로 줄인 이 개정본의 편집도 같은 AI 도구로 했습니다. 데모 자체는 AI 모델을 호출하지 않습니다. 모든 동작은 규칙 기반 JavaScript이고 외부 라이브러리를 쓰지 않습니다. 이 데모는 고객의 의뢰로 제작하거나 납품한 결과물이 아닙니다. 2026년 10월 8일 J. Kim이 이 개정본을 읽고 승인했습니다.
이 사이트에서 만든 계산기와 다른 도구는 Tools 페이지에 모아 두었습니다.
