SEOUL VENUS
SMILE ATELIER · APGUJEONG
접근성 안내
서울비너스치과의원 웹사이트는 국가표준 KWCAG 2.2(KS X OT0003:2022)의 AA 단계를 목표로 하며, 현재 상태는 AA 부분 준수입니다. 이 페이지는 사이트가 지금 어떻게 만들어져 있는지, 그리고 아직 무엇을 지키지 못했는지 적어 둔 문서입니다. 잘한 점을 자랑하려는 글이 아니라, 사용하시다 막히는 곳이 있을 때 어디에 말씀하시면 되는지 알려 드리려는 글입니다.
최종 수정 2026년 9월 1일. 이 페이지에 적힌 측정값은 모두 2026년 8월 12일에 브라우저에서 1440px과 390px 두 폭으로 직접 잰 것입니다.
우리가 말하는 접근성
화면을 크게 키워 보시는 분, 마우스 없이 키보드만 쓰시는 분, 화면을 보는 대신 소리로 들으시는 분, 움직임에 어지러움을 느끼시는 분 — 모두 같은 문으로 들어오셔야 한다고 생각합니다. 아래는 그 생각을 코드로 옮긴 부분과, 아직 옮기지 못한 부분입니다.
여덟 가지입니다. 모두 이 페이지를 읽는 동안 직접 확인하실 수 있는 것들입니다.
적합성 선언
기준의 이름을 적지 않은 안내는 의견에 지나지 않습니다. 국내 기준은 국가표준 「한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2」, 표준번호 KS X OT0003:2022입니다. 한국지능정보사회진흥원이 개정하고 국립전파연구원이 2022년 12월 28일 고시했으며, 4개 원칙 · 14개 지침 · 33개 검사항목으로 이루어져 있고 국제 기준 WCAG 2.1과 2.2의 개정 내용을 옮겨 담았습니다. WCAG는 2.1이 2018년 6월, 2.2가 2024년 12월 12일에 W3C 권고가 되었고, 두 판 모두 A · AA · AAA 세 단계로 나뉩니다.
이 사이트가 목표로 삼는 단계는 AA이고, 지금 상태는 AA 부분 준수입니다. 완전 준수가 아닌 이유는 아래 표에 지키지 못한 항목이 남아 있기 때문이며, 완전 준수라고 적으려면 그 항목을 빼야 하기 때문입니다. 표는 검사 도구에 주소를 넣어 받은 점수가 아니라 브라우저에서 이 페이지를 열어 값을 읽어 적은 것입니다.
| 검사 항목 | 이 페이지에서 확인한 것과 판정 |
|---|---|
| 대체 텍스트 · 1.1.1 | 이 페이지의 이미지는 모두 장식이며 alt를 비웠습니다. 준수. |
| 제목 구조 · 1.3.1 | h1 하나, 그 아래 h2 · h3 · h4가 건너뜀 없이 이어집니다. 준수. |
| 색 대비 · 1.4.3 | 기준 4.5:1에 대해 본문은 8.60:1, 그러나 작은 회색 글씨 세 곳이 3.42:1. 부분 준수. |
| 크기 조정 · 1.4.4 | 확대로는 200%에서 잘린 글이 없습니다. 다만 기본 글꼴 크기를 키워도 아무것도 달라지지 않습니다. 부분 준수. |
| 리플로 · 1.4.10 | 폭 320px에서 문서 폭은 310px, 가로 스크롤 없음. 준수. |
| 키보드 · 2.1.1 | 도해가 든 가로 스크롤 칸을 빼면 모두 닿습니다. 부분 준수. |
| 건너뛰기 · 2.4.1 | 없습니다. 맨 위에서 첫 문장까지 정지점 열 개가 놓여 있습니다. 미준수. |
| 초점 · 2.4.3 · 2.4.7 | 읽는 순서를 따르고, 열린 대화 상자 안에 머물며, 정지점 51개 모두 테두리가 그려집니다. 준수. |
| 동작 · 2.3.3 | 동작 줄이기를 켜면 움직이던 요소의 애니메이션 이름이 none이 됩니다. 준수. |
준수라고 적은 줄도 이 페이지를 쓴 사람이 확인한 것입니다. 국내에는 과학기술정보통신부가 지정한 인증기관이 부여하는 웹 접근성 품질인증 마크가 있습니다. 이 사이트는 그 인증을 신청한 적도 받은 적도 없으므로 어떤 마크도 붙어 있지 않습니다.
동작 줄이기
이 사이트의 움직임은 장식이지 정보가 아닙니다. 움직임으로만 설명되는 내용은 없기 때문에, 움직임이 멈춰도 사라지는 내용은 없습니다. 같은 문장이 같은 순서로 남습니다.
01
나타나는 연출과 화면이 고정되는 구간이 꺼지고, 내용은 처음부터 제자리에 보입니다.
02
사진의 느린 확대가 멈추고, 그 뒤의 빛 입자와 안개 레이어도 함께 멈춥니다.
03
페이지 사이를 덮는 베일 전환이 생략되고, 영상은 자동 재생 대신 정지 화면으로 남습니다.
설정을 찾는 곳 — 아이폰·아이패드: 설정 › 손쉬운 사용 › 동작. 맥: 시스템 설정 › 손쉬운 사용 › 디스플레이. 윈도우: 설정 › 접근성 › 시각 효과. 안드로이드: 설정 › 접근성.
동작 줄이기는 게스트의 기기에서 켜는 설정입니다. 한 번 켜 두시면 이 사이트가 그 값을 읽고 따르며, 이 사이트 안에서 따로 바꾸실 것은 없습니다.
설정을 켜면 스크롤 등장, 고정 구간, 사진의 확대, 빛 입자가 멈춥니다. 이 사이트의 움직임은 장식이어서, 멈춰도 사라지는 내용은 없습니다.
모든 글과 읽는 순서, 모든 사진과 링크는 그대로 남습니다. 같은 문장이 같은 순서로 남습니다.
왼쪽에 있는 것 가운데 내용은 없고, 오른쪽에 있는 것 가운데 장식은 없습니다.
동작을 끄셔도 사라지는 문장도, 사진도, 이동 경로도 없습니다.
이 그림 역시 동작 줄이기를 켜시면 움직이지 않습니다 — 설명하는 규칙을 그림에도 그대로 적용했습니다.
← 옆으로 밀어 보세요켜짐과 꺼짐
움직임을 줄인다고만 적는 대신, 실제로 무엇이 달라지는지 적어 둡니다.
| 요소 | 기본 상태 | 동작 줄이기를 켰을 때 |
|---|---|---|
| 스크롤 등장 | 화면에 들어오며 천천히 떠오릅니다 | 처음부터 제자리에 있습니다 |
| 고정 구간 | 화면이 잠시 고정되며 장면이 바뀝니다 | 고정 없이 일반 문단으로 이어집니다 |
| 사진의 확대 | 아주 천천히 확대와 축소를 반복합니다 | 정지한 채로 표시됩니다 |
| 빛 입자 · 안개 | 계속 떠다닙니다 | 멈춘 상태로 표시됩니다 |
| 영상 | 소리 없이 자동으로 재생됩니다 | 스스로 재생하지 않습니다 |
| 페이지 전환 | 베일이 한 번 덮였다 걷힙니다 | 곧바로 이동합니다 |
| 가로 문자열 | 가로로 흐릅니다 | 멈춘 채로 읽힙니다 |
| 포인터 반응 | 가리킨 카드가 살짝 떠오릅니다 | 그대로 남습니다 — 스스로 시작되는 움직임이 아니기 때문입니다 |
이 사이트의 한국어 문장에는 거의 모두 같은 톤으로 쓴 영어 문장이 나란히 붙어 있습니다. 기계 번역이 아닙니다. 아직 한국어로만 남은 짧은 문구가 일부 있고, 하나씩 채우고 있습니다. EN으로 바꾸면 문장이 바뀌는 동시에 문서의 언어가 영어로 설정되고, 화면 낭독기는 그 값을 보고 읽을 목소리를 고릅니다.
선택은 브라우저에 저장되어, 다음 페이지도 고르신 언어로 열립니다.
브라우저에서 확대하시면 글이 잘리지 않고 줄이 다시 흐릅니다. 한국어는 단어 안이 아니라 단어 사이에서 줄이 바뀌도록 해 두었습니다. 이 문단에는 원래 글자가 상대 단위로 짜여 있다는 문장이 있었습니다. 사실이 아니어서 지웠고, 그것을 확인한 측정은 아래에 적어 두었습니다.
짐작하지 않고 직접 키를 눌러 확인한 여섯 가지입니다. 2026년 8월 12일, 폭 1440px 창에서 셌습니다. 마지막 하나는 못 한 일입니다.
상담 예약은 페이지를 떠나지 않고 그 위에 대화 상자를 엽니다. 초점은 상자 안으로 옮겨가고, 상자 안의 정지점은 열세 개입니다. 마지막에서 Tab을 누르면 처음으로, 처음에서 Shift+Tab을 누르면 마지막으로 돌아와, 초점이 뒤쪽 페이지로 새어 나가지 않습니다. Esc나 닫기 단추로 닫으면 누르셨던 자리로 초점이 되돌아옵니다. 닫혀 있는 동안에는 inert로 표시되어, 화면 밖으로 밀리는 정도가 아니라 아예 Tab 순서에서 빠집니다.
화면 낭독기
이 사이트는 NVDA로도, JAWS로도, 맥이나 아이폰의 보이스오버로도, 안드로이드의 TalkBack으로도 열어 본 적이 없습니다. 한 번도 없습니다. 제목 구조와 대체 텍스트와 언어에 대해 위에 적은 것은 모두 코드에서 읽어 확인한 것이지 소리로 들어 확인한 것이 아니며, 그 둘은 같은 검사가 아닙니다.
그것이 뜻하는 바를 그대로 적자면, 구조는 아마 괜찮을 것이고 저희 눈에 보이지 않는 곳에서 읽기가 어색할 수 있습니다. 어떤 제목은 엉뚱한 강세로 불릴 수 있습니다. 위쪽 도해는 한 장의 그림으로 한 문장의 설명과 함께 읽히게 해 두었는데, 스물여섯 개의 조각이 뜻 없는 순서로 불리는 일을 피하려던 것이었을 뿐, 그 한 문장이 맞는지는 들어 보지 못했습니다. 그래서 이 절은 아무것도 주장하지 않고 하지 않은 일만 적어 둡니다. 이 사이트를 귀로 읽으신다면, 뜻이 통하지 않던 그 한 문장이 이 페이지의 어떤 문단보다 값집니다.
글자 크기와 확대
이 둘은 서로 다른 설정이고, 이 사이트는 그중 하나에만 응답합니다. 그 사실을 적어 두는 것이 이 절의 목적입니다.
200%
1440px 창을 200%로 키우면 720px이 남습니다. 그때 문서 폭은 710px로 창 안에 들어와 오른쪽으로 넘치지 않았습니다. 잘리거나 겹친 문장이 없고, 메뉴는 MENU 하나로 접히고, 12칸 배치는 위아래로 쌓이며, 동작 줄이기 표는 여덟 줄을 모두 지킵니다. 대신 페이지 길이가 19,166px이 됩니다. 아무것도 감추지 않은 값입니다.
400%
기준이 요구하는 더 어려운 시험은 쓸 수 있는 폭 320px입니다. 320px에서 문서 폭은 310px이었고 여기서도 옆으로 밀리지 않았으며, 비교 표는 270px 폭에서 모든 줄이 읽혔습니다. 손으로 밀어야 하는 곳은 도해 한 군데뿐이고, 그것은 그림이라 비율을 지킵니다.
0%
문서의 뿌리 글꼴 크기를 32px로 올려 보았습니다. 브라우저의 글꼴 크기 설정이 페이지에 닿는 길이 바로 이것입니다. 그런데 본문은 13.5px과 17px 그대로였습니다. 이 페이지가 불러오는 글자 크기 선언 166개가 모두 고정된 px이고 상대 단위는 하나도 없습니다. 브라우저를 큰 글씨로 맞춰 두신 분은 여기서 아무것도 얻지 못하고, 대신 확대를 쓰셔야 합니다.
반올림되어 사라지기 쉬운 숫자를 하나 더 적습니다. 1024px 아래에서는 가장 작은 글자가 11px 바닥까지 올라오고, 390px에서 실제로 그려진 가장 작은 글자도 11px이었습니다. 1025px 위에서는 그 바닥이 스타일시트에서 온 크기까지 닿지 않아 둘이 남습니다. 엠블럼 아래 워드마크 9px, 표의 열 제목 9.5px.
대비, 실측
이 페이지 아래쪽에는 가장 작은 회색 글씨가 기준에 못 미친다고 적어 둔 칸이 있습니다. 맞는 말이지만 숫자가 없으면 쓸모가 없어서 여기 적습니다. 각 값은 브라우저가 실제로 칠하는 색을, 실제로 그 뒤에 깔린 바탕 위에 합성한 뒤 계산한 것입니다. 반투명한 색은 적힌 그대로가 아니라 바탕에 얹힌 다음의 상태로 쟀습니다.
| 색 조합 | 쓰인 곳 | 측정값 |
|---|---|---|
| 먹빛 · 크림 | #1a1414 · #f5efe6 — 제목과 두 표의 본문 | 15.92:1 — 가장 센 조합 |
| 버건디 · 크림 | #7a2530 · #f5efe6 — 링크와 제목 속 강조 | 8.61:1 |
| 본문 · 크림 | #4A423C · #f5efe6 — 크림 바탕의 모든 문단 | 8.60:1 |
| 보조 · 크림 | #5F554E · #f5efe6 — 카드 설명과 도해 각주 | 6.34:1 |
| 금색 · 크림 | #836a31 · #f5efe6 — 작은 대문자와 표의 열 제목 | 4.51:1 — 기준을 0.01 넘겼을 뿐, 여유가 아닙니다 |
| 회색 · 크림 | #8A7F76 · #f5efe6 — 수정 날짜, 질문 아래 안내, 바닥글 | 3.42:1 — 4.5에 못 미칩니다. 세 곳이 걸립니다. |
| 밝은 금색 · 크림 | #c9a24b · #f5efe6 — 아래 네 장 카드의 순번 | 2.10:1 — 한참 아래. 순번뿐이며 옆의 제목은 15.92:1입니다. |
| 크림 · 버건디 | #f5efe6 · #5c1a1e — 어두운 띠 안의 제목 | 11.33:1 |
| 크림 60% · 버건디 | 그 띠에서 가장 흐린 줄 — 기기별 설정 위치 | 4.98:1 — 가장 흐린 글자도 4.5는 넘습니다 |
그러니 실패는 둘이고, 반올림하는 대신 그대로 적습니다. 3.42:1의 회색이 지고 있는 것은 날짜와 한 줄 안내와 주소 표기이며, 그곳에서만 말해지는 내용은 없습니다. 2.10:1의 금색이 지고 있는 것은 이미 보이는 카드를 세는 숫자입니다. 어느 쪽도 급한 일은 아니고, 어느 쪽도 괜찮은 일은 아닙니다. 기준선은 저희가 정한 것이 아닙니다. 본문 4.5:1, 큰 글자 3:1이 AA가 요구하는 값입니다.
아직 부족한 것
해 둔 것만 적힌 문서는 접근성 안내가 아닙니다. 아래 여덟 가지 가운데 일곱은 아직 열려 있고, 하나(전화번호)는 그 뒤에 해결되어 그렇게 표시해 두었습니다. 뒤의 네 가지는 이 페이지를 재다가 찾은 것이며, 각각 확인한 날짜를 함께 적었습니다.
01
이 사이트의 내부 이미지는 공간이 지어지기 전에 만든 콘셉트 이미지입니다. 그래서 흐리게 처리하고 그렇게 표시해 두었습니다. 실제 촬영본이 준비되는 대로 교체합니다.
02
이 사이트는 아직 제3자의 접근성 진단을 받지 않았습니다. 위에 적은 내용은 만든 사람이 직접 확인한 범위이며, 어떤 인증 표시도 붙이지 않았습니다.
03
사이트 곳곳에 적힌 02-515-8588은 개통되어 있습니다. 전화와 이메일 어느 쪽으로든 닿습니다. 이 항목은 해결되었고, 조용히 지우는 대신 해결되었다고 적어 목록에 남겨 둡니다.
04
본문은 8.60:1이지만, 가장 작은 회색 글씨는 기준 4.5에 대해 3.42:1이고 카드 순번은 2.10:1입니다. 페이지를 손볼 때마다 어둡게 고치고 있습니다. (2026년 8월 12일)
05
어느 페이지에도 없습니다. 맨 위에서 첫 문장까지 키보드 정지점 열 개를 매번 지나야 합니다. (2026년 8월 12일)
06
좁은 화면에서 도해는 칸보다 넓어져 옆으로 밀어야 하는데, 그 칸은 초점을 받지 않습니다. (2026년 8월 12일)
07
NVDA도 JAWS도 보이스오버도 TalkBack도 한 번도 쓰지 않았습니다. 여기 적은 것은 코드에서 읽은 것이며, 그것은 다른 검사입니다. (2026년 8월 12일)
08
글자 크기가 모두 고정된 px 값이라, 브라우저를 큰 글씨로 맞춰 두셔도 무시됩니다. 대신 확대가 작동합니다. (2026년 8월 12일)
막히는 곳을 알리는 법
한 문장이면 충분합니다. 다만 네 가지가 있으면 훨씬 빨리 찾습니다. 어느 페이지였는지, 어떤 기기와 브라우저였는지, 화면 낭독기를 쓰신다면 그 이름, 그리고 무엇을 하시려다 어디에서 막히셨는지입니다.
그 다음에 일어나는 일은 이렇습니다. 접근성에 관한 연락은 진료 문의와 나누어 사람이 직접 읽고, 영업일 기준 닷새 안에 회신드립니다. 같은 증상을 확인하면 고칩니다. 당장 고칠 수 없는 것은 위의 여덟 가지에 확인한 날짜와 함께 올려, 조용히 밀리는 대신 눈에 보이게 둡니다. 틀린 것이 이 페이지라면 이 페이지를 고치고 맨 위의 수정 날짜를 바꿉니다. 저희 게스트가 아니어도 보내실 수 있습니다. 이메일 주소는 이 페이지 맨 아래에 있으며, 전화로도 닿습니다.
제목 구조와 대체 텍스트는 낭독기가 순서대로 읽을 수 있도록 작성했고, KR·EN 전환에 따라 문서의 언어 속성도 함께 바뀌어 읽을 목소리가 맞게 선택됩니다. 다만 외부 진단은 아직 받지 않았습니다. 읽히지 않는 부분을 만나시면 알려 주십시오. 이 페이지의 어떤 문장보다 그 연락이 도움이 됩니다.
기기의 동작 줄이기 설정을 켜시면 이 사이트가 스스로 시작하는 연출은 모두 멈춥니다. 스크롤 등장과 고정 구간, 사진의 확대, 빛 입자가 멈추고, 모든 글과 읽는 순서, 모든 사진과 링크는 그대로 남습니다. 설정은 자동으로 읽히므로 사이트 안에서 따로 켜실 것은 없습니다. 기기에서 설정을 찾기 어려우시면 연락 주시면 함께 찾아 드립니다.
알려 주시면 확인합니다. 사이트가 틀렸다면 사이트를 고치고, 이 페이지가 틀렸다면 이 페이지를 고친 뒤 맨 위의 수정 날짜를 바꿉니다. 접근성에 관한 연락은 진료 문의와 별도로 확인하며, 저희 게스트가 아니어도 보내실 수 있습니다.
여기 없는 질문은 이메일로 보내 주십시오 — 한 문장이면 충분합니다.
고칠 수 있는 것의 대부분은 알려 주셔야 발견됩니다. 이메일이 가장 확실하며, 어느 페이지에서 무엇이 되지 않았는지 한 문장이면 충분합니다.
전화로도, 이메일로도 서울비너스치과의원에 닿습니다 — 접근성에 관한 연락은 진료 문의와 나누어 읽습니다.
서울비너스치과의원 · 대표자 신유림 · 서울 강남구 압구정로30길 17, 이소니프라자 308호 · © 2026 Seoul Venus Dental