작동 방식
코드에서
게시하기 전에 Briks는 글자 색을 그 글자가 놓인 바탕과 비교해 확인해요.
라이브 페이지에서
처음 게시한 뒤에 데스크톱과 휴대폰 너비에서 페이지를 살펴봐요.
필요하면 수리
읽기 어려운 글자는 한 번 고쳐 줘요.
빌드할 때마다 점검하는 것
낮은 대비는 웹에서 가장 흔한 접근성 문제 중 하나예요. 흰 배경 위의 연한 회색, 밝은 사진 위의 흰색, 비슷한 색조 위의 브랜드 색처럼요. Briks는 게시하기 전에 사이트 코드에서 색 대비를 점검해서, 글자에 쓴 각 색을 실제로 놓인 배경과 비교해 측정해요.
기준은 접근성 지침이 정한 WCAG AA예요. 본문 글자는 4.5 대 1, 큰 글자는 3 대 1이고, 큰 글자는 24픽셀 이상 또는 굵은 글씨일 때 약 19픽셀 이상을 말해요. 색 대비가 부족한 곳에서는 그 바탕 위의 글자를 잘 읽히는 색으로 바꿔요.
첫 게시 후 Briks는 공개된 페이지를 데스크톱 너비와 휴대폰 너비로 살펴보고 대비를 다시 확인해요. 사진 위의 글자처럼 브라우저에서만 드러나는 문제가 있기 때문이에요. 읽기 어려운 곳이 있으면 한 번 고쳐요. 선택한 모든 페이지가 메뉴에 있는지도 확인해요.
앱과 출시 때 추가되는 점검
앱은 게시하기 전에 코드를 한 번 더 검토해요. 가장 피해가 큰 실수를 중점적으로 봐요. 파일에 직접 적힌 비밀 키, 제한 없는 데이터베이스 쓰기, 누구나 읽을 수 있는 회원 테이블, 문자열을 이어 붙여 만든 데이터베이스 쿼리예요.
사이트를 프로덕션에 올리면 먼저 출시 점검이 실행돼요. 첫날부터 업체를 난처하게 할 만한 문제가 있으면 출시를 멈춰요. 남아 있는 임시 문구, 초안이 지어냈는데 아직 바꾸거나 확인하지 않은 사실, 검색 결과용 제목과 설명이 따로 없는 페이지, 어디로도 이어지지 않는 페이지 간 링크, 존재하지 않는 주소를 위한 페이지가 없는 경우가 해당돼요.
최대 12개 페이지를 읽고 최대 80개 링크를 시도해 봐요. AI 모델은 쓰지 않아서 크레딧도 들지 않아요.
더 꼼꼼한 점검, 그리고 점검하지 않는 것
새 프로젝트 단계에서 스위치 하나로 더 자세한 점검을 켤 수 있고, 기본값은 꺼짐이에요. 첫 버전이 게시되면 Briks가 화면 크기 네 가지로 살펴보고, 겹치는 부분이나 특정 너비에서 무너지는 레이아웃처럼 깨져 보이는 곳을 고쳐요. 몇 분 더 걸리고 크레딧이 조금 들어요. 점검이 진행되는 동안 5 크레딧이 보류돼요. 이후 어떤 변경에든 같은 점검을 요청할 수 있어요.
한계를 분명히 말씀드리면, 겹침, 사진, 링크 점검은 빌드할 때마다 실행되지 않아요. 보통의 첫 빌드에서는 대비 점검과 메뉴 점검이 실행되고, 앱이라면 코드 읽기도 실행돼요. 링크는 출시 점검이나, 켜 두셨다면 더 자세한 점검에서 확인해요.
이 모든 것이 직접 눈으로 확인하는 일을 대신하지는 않아요. 프로덕션에 게시하기 전에 휴대폰에서 미리보기를 열어 보고, 어색한 부분은 쉬운 말로 요청하세요.
게시 전 점검 활용 사례
세 가지 예시 업종과 각각 어떻게 쓰는지 보여 드려요. 사이트가 나오는 곳은 예시 업종을 위해 Briks가 만든 샘플이며, 실제 고객 사이트가 아니에요.
- 01캔들 공방
부드러운 사진 위의 옅은 글씨
한 캔들 제작자가 안개 낀 바닷가 사진 위에 헤드라인을 넣고 싶어 해요. 휴대폰 너비에서는 헤드라인 일부가 하늘의 가장 밝은 부분 위에 놓여요. 라이브 점검은 바로 이런 문제를 위해 있어요. 게시된 페이지를 데스크톱과 휴대폰 화면에서 살펴보고, 읽기 어려운 글자를 고쳐 줘요.
Saltmarsh Candles은(는) 실제 고객이 아니라, 가상의 캔들 공방를 위해 Briks가 만든 샘플 사이트예요. 샘플 열기 - 02법률사무소
흰색 바탕의 연한 금색 브랜드 컬러
어느 법률 사무소의 브랜드 색은 밝은 금색이에요. 흰 배경 위 글자색으로 쓰면 4.5 대 1 기준에 한참 못 미쳐요. 게시하기 전에 코드 점검이 이를 찾아내 그 배경 위의 글자를 잘 읽히는 색으로 바꿔 주기 때문에, 사무소의 페이지는 처음 게시할 때부터 읽기 쉬워요.
- 03건설 회사
게시되기 전에 점검하는 작업팀용 업무 앱
한 건설 회사가 작업자들이 작업을 기록하는 작은 앱을 요청해요. 게시하기 전에 코드를 읽어 파일에 직접 적힌 키와 제한 없는 쓰기가 있는지 확인해요. 회사가 프로덕션으로 옮기려 하면 출시 점검에서 만들어지지 않은 프로젝트 페이지로 가는 링크도 발견해, 고쳐질 때까지 출시를 멈춰요.
제공되는 것
- 게시 전에 코드에서 WCAG AA 기준으로 명암비를 확인해요
- 데스크톱과 휴대폰에서 라이브 페이지를 다시 점검하고, 한 곳을 수정했어요
- 선택한 모든 페이지가 게시 전에 메뉴에 들어가요
- 앱은 파일에 직접 적힌 키, 제한 없는 쓰기, 안전하지 않은 쿼리를 점검해요
알아두면 좋아요
- 네 가지 너비로 더 꼼꼼하게 점검하는 옵션은 새 프로젝트 단계에서 스위치 하나로 켤 수 있어요.
- 프로덕션에 게시할 때 어디로도 이어지지 않는 링크를 포함한 출시 점검을 해요.