ViewCheck 기술 블로그

047편 : 함께 사용이 되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용하고 있다.

047편 : 함께 사용이 되는 비슷한 크기의 구성 요소는 래디어스 값을 동일하게 적용하고 있다.KRDS 체크리스트 항목 DS-047 · 디자인 스타일 > 형태〈846 규칙 완전 분해 시리즈 ㊼〉 — "나란히 있는 것들은 둥글기를 맞춰라": 형태의 일관성0. 들어가며 — 함께 있는 것들의 조화레디어스의 단계·범위·천장·단위를 봤습니다. 이번 47편은 레디어스의 일관성 — 특히 '함께 있는 비슷한요소끼리 둥글기를 맞추라'는 규칙입니다.화면에는 비슷한 요소들이 나란히 놓이는 경우가 많습니다. 버튼 여러 개가 한 줄에, 카드 여러 개가 그리드에,입력칸 여러 개가 폼에. 그런데 이 나란한 요소들의 둥글기가 제각각이면 — 한 버튼은 4px, 옆 버튼은 8px이면— 미묘하게 어긋나 보입니다. DS-047은 이런 경우..

운영기관 식별자(Identifier) 완전 해부 - KRDS 공식 기준

운영기관 식별자(Identifier) 완전 해부 - KRDS 공식 기준공공 사이트에 처음 들어갔을 때, 우리는 무의식중에 화면 맨 위 왼쪽 구석을 봅니다. 거기 무엇이 있는지 정확히 의식하지는 않지만, 눈은 자동으로 그쪽을 훑죠. 거기에 기관의 이름과 마크가 있으면 "아, 여기가 ○○부 사이트구나" 하고 안심하고 본론으로 들어갑니다. 그런데 가끔, 그 자리에 아무것도 없거나, 마크는 있는데 무슨 기관인지 도무지 알 수 없거나, 클릭해도 아무 일도 일어나지 않는 경우를 만납니다. 그 순간 우리는 미세하게 불안해집니다. "여기 진짜 정부 사이트 맞아? 혹시 사칭 사이트 아니야?"운영기관 식별자(Identifier)는 바로 그 자리에 있는 컴포넌트입니다. 화면 맨 위, 보통 왼쪽에 자리 잡은 "이 사이트를 누..

25편 : 동종 기관끼리 KRDS 점수를 비교하면 무슨 일이 벌어지나 — ViewCheck 벤치마킹 데이터 연구

25편 : 동종 기관끼리 KRDS 점수를 비교하면 무슨 일이 벌어지나 — ViewCheck 벤치마킹 데이터 연구"우리 기관 점수가 몇 점인지는 알겠는데, 그게 잘한 건지 못한 건지를 어떻게 알죠?"들어가며 — 점수 하나가 말해주는 것과 말해주지 않는 것분석을 마치고 점수가 나왔다. KRDS 846규칙 기준으로 이 기관의 준수율은 62%다. 이 숫자를 보는 담당자의 첫 반응은 보통 두 가지로 갈린다. "생각보다 높네"라고 느끼거나, "이렇게나 낮다고?"라고 충격받거나. 그런데 흥미롭게도, 두 반응 모두 거의 같은 후속 질문으로 이어진다."다른 기관들은 얼마나 되는 거죠?"그 질문이 바로 벤치마킹의 출발점이다. 62%라는 숫자는 절대값이다. 그것만으로는 "잘한 것인지 못한 것인지"를 말해주지 않는다. 같은 ..

046편 : 래디어스 값을 px 또는 % 단위로 설정하고 있다.

046편 : 래디어스 값을 px 또는 % 단위로 설정하고 있다.KRDS 체크리스트 항목 DS-046 · 디자인 스타일 > 형태〈846 규칙 완전 분해 시리즈 ㊻〉 — "고정 둥글기는 px, 원형은 %": 레디어스 단위의 선택0. 들어가며 — 둥글기를 표현하는 두 단위레디어스의 단계(43편)·범위(44편)·천장(45편)을 봤습니다. 이번엔 그 값을 어떤 단위로 표현할지입니다.레디어스를 표현하는 단위는 주로 두 가지 — px(픽셀) 와 %(백분율) 입니다. DS-046은 이 둘을 쓰라고규정합니다. 흥미로운 건, 글자 크기에서는 px 대신 rem을 권했는데(35편), 레디어스에서는 px를 허용한다는것입니다. 왜 다를까요? 그리고 px와 %는 각각 언제 쓸까요? 이번 편은 레디어스 단위의 선택 기준을 풀어냅니다..

기능은 베껴도 방법론은 못 베낀다 — 겉보기 기능 뒤에 숨은 '방법'을 알아보는 법

기능은 베껴도 방법론은 못 베낀다 — 겉보기 기능 뒤에 숨은 '방법'을 알아보는 법들어가며 — "기능 목록은 다 똑같던데요"의 함정이번 주 월요일에는 "왜 하필 특허가 다섯 건이나 필요했나"를 말씀드렸습니다. 겉으로 드러나는 화면이나 버튼 같은 기능은 누구나 흉내 낼 수 있지만, 그 기능을 실제로 굴러가게 만드는 방법(방법론)은 쉽게 베낄 수 없다는 이야기였습니다. 오늘은 그 이야기를 한 발 더 밀어보려 합니다. "기능은 베껴도 방법론은 못 베낀다"는 말이, 실제 현장에서 어떻게 드러나는지를요.도구를 고르는 입장에서 가장 흔히 빠지는 함정이 하나 있습니다. 바로 "기능 목록 비교"입니다. A 도구도 접근성 검사가 된다고 하고, B 도구도 된다고 합니다. A도 AI 분석을 준다 하고, B도 준다 합니다. ..

8pt 그리드가 만드는 정돈된 레이아웃

8pt 그리드가 만드는 정돈된 레이아웃ViewCheck 마케팅 홍보 — 2026년 9월 · W4 간격·8pt 그리드 (9/28~10/4)대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트【 공감·문제제기 】“이 페이지, 뭔가 어수선한데 정확히 뭐가 문제인지 모르겠어요.”공공 사이트 개편 검수 회의에서 가장 자주 나오는 말이다. 화면을 띄워놓고 다 같이 들여다보는데, 분명 색도 맞췄고 글꼴도 통일했는데 뭔가 ‘정돈이 안 된’ 느낌이 든다. 누군가는 “여백이 좀 답답해요”라 하고, 또 누군가는 “버튼이 붕 떠 보여요”라 한다. 다들 불편함은 느끼는데, 그 불편함의 정체를 짚어내지 못한다. 그래서 결국 “좀 더 깔끔하게 정리해 주세요”라는 두루뭉술한 피드백으로 회의가 끝난다. 그리고 업체는 ‘깔끔하..

24편 : 반응형 품질 — 데스크톱·태블릿·모바일 3환경 실측과 터치타겟 44px 연구

24편 : 반응형 품질 — 데스크톱·태블릿·모바일 3환경 실측과 터치타겟 44px 연구한 사이트를 세 화면에서 본다, ViewCheck가 뷰포트마다 무엇을 보는지들어가며 — "PC에서는 잘 되는데 폰으로 들어오면 이상해요"공공기관 홈페이지 담당자라면 한 번쯤 이런 민원을 받아봤을 것이다."PC로 들어오면 잘 나오는데, 폰으로 들어가면 글씨가 너무 작아요.""버튼을 누르려고 했는데 옆에 다른 버튼이 같이 눌려요.""화면이 가로로 잘려서 스크롤을 옆으로 해야 해요."민원의 언어는 다양하지만, 진단의 언어로 옮기면 결국 같은 곳으로 수렴한다. 반응형 품질 문제다.반응형(Responsive)이라는 단어는 이제 워낙 자주 쓰여서 오히려 당연한 것처럼 느껴진다. "요즘 사이트는 다 반응형이잖아요."라는 말도 종종 ..

045편 : 래디어스 최댓값을 12px로 설정하고 있다.

045편 : 래디어스 최댓값을 12px로 설정하고 있다.KRDS 체크리스트 항목 DS-045 · 디자인 스타일 > 형태〈846 규칙 완전 분해 시리즈 ㊺〉 — "둥글기의 천장": 12px이라는 분명한 상한0. 들어가며 — 상한을 못 박는 이유지난 44편에서 레디어스 범위를 '2px~12px'로 봤습니다. 이번 45편은 그중 상한(12px) 을 다시 한 번 명시적으로 못 박는 규칙입니다.44편에서 이미 12px이 상한이라 했는데, 왜 별도 규칙으로 또 강조할까요? 30·31편(두께 둘/넷)에서 봤듯, KRDS는중요한 한계를 명시적 항목으로 분리해 빠짐없이 지켜지게 합니다. '범위가 2~12px'(044)이라는 규칙과'최댓값은 12px'(045)이라는 규칙을 함께 두어, 상한이 흐려지지 않게 하는 것이죠. ..

026편 : [접근성연구·모바일] 메뉴를 못 찾는 순간

026편 : [접근성연구·모바일] 메뉴를 못 찾는 순간모바일 탐색 점검 관점〈디지털 접근성 연구 026〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.들어가며앞 편(025)에서 모바일 내비게이션의 기준, 즉 메뉴를 접어도 길이 보존되어야 한다는 관점을 다뤘다. 이번 편은 그 시선을 '실패의 순간'으로 좁힌다. 사용자가 모바일에서 메뉴를, 길을, 원하는 페이지를 '못 찾는' 구체적 순간들을 모아, 점검에서 그 막힘을 어떻게 재현하고 찾아낼지에 관한 점검 관점이다.길을 못 찾는 일은 흔히 사용자의 탓으로 돌려진다. '익숙하지 않아서', '잘 못 봐서'. 그러나 점검의 관점에서는 그 반대다. 익숙하지 않은 사용자도, 잘 못 보는 사..

044편 : 2px~12px의 래디어스 값을 사용하고 있다.

044편 : 2px~12px의 래디어스 값을 사용하고 있다.KRDS 체크리스트 항목 DS-044 · 디자인 스타일 > 형태〈846 규칙 완전 분해 시리즈 ㊹〉 — "둥글기에도 적정 범위가 있다": 2px에서 12px 사이0. 들어가며 — 단계에 '실제 값'을 부여하다지난 43편에서 레디어스를 '5단계로 구성'하라는 원칙을 봤습니다. 이번 44편은 그 단계의 실제 값 범위를못 박습니다 — 2px에서 12px 사이.레디어스 5단계가 '구조'라면, 212px은 그 구조의 '눈금'입니다. 둥글기를 0px(완전 각짐)부터 무한히 둥글게할 수 있지만, KRDS는 그 범위를 212px로 한정합니다. 너무 각지지도(2px 미만), 너무 둥글지도(12px 초과)않은 적정 범위죠. 이번 편은 왜 이 범위인지, 둥글기의 적..

공식 배너(Masthead) 자가진단 - ViewCheck 5분 점검

공식 배너(Masthead) 자가진단 - ViewCheck 5분 점검정부 사이트에 들어가면 화면 맨 위, 헤더보다도 더 위에 가느다란 띠가 하나 있습니다. "이 누리집은 대한민국 공식 전자정부 누리집입니다" 같은 한 줄과, 그 왼쪽에 작은 태극 문양 비슷한 마크. 대부분의 사람은 이걸 거의 의식하지 못하고 지나갑니다. 너무 위에 있고, 너무 작고, 매번 똑같으니까요. 그런데 이 작은 띠가 바로 KRDS가 말하는 **공식 배너(Masthead)**입니다. 그리고 이건 "장식"이 아니라 "신뢰의 표식"입니다.왜 신뢰의 표식이냐면, 요즘 진짜 정부 사이트를 사칭하는 가짜 사이트가 너무 많기 때문입니다. 환급금을 미끼로 한 피싱, 과태료를 빙자한 사기, 정부 지원금을 가장한 개인정보 탈취. 이런 가짜들이 노리는..

043편 : 레디어스를 컴포넌트의 사이즈 기준 5단계로 구성하고 있다.

043편 : 레디어스를 컴포넌트의 사이즈 기준 5단계로 구성하고 있다.KRDS 체크리스트 항목 DS-043 · 디자인 스타일 > 형태〈846 규칙 완전 분해 시리즈 ㊸〉 — "모서리의 둥글기에도 체계가 있다": 레디어스 5단계0. 들어가며 — 디자인 스타일의 세 번째 축, '형태'색상(26편)과 타이포그래피(16편)를 마치고, 이번엔 디자인 스타일의 세 번째 분류 — 형태(Shape) 입니다.그 첫 주제는 레디어스(radius), 즉 모서리의 둥글기입니다.버튼, 카드, 입력칸… 화면의 거의 모든 요소에는 모서리가 있고, 그 모서리는 각지거나 둥글게 처리됩니다.이 둥글기를 레디어스(border-radius) 라 부르죠. 사소해 보이지만, 레디어스는 화면의 인상을 크게 좌우합니다. 각진 모서리는 단단하고 격..

다섯 특허 ↔ 세 방법, 한 장으로 보는 지도 — 1개월차 마무리

다섯 특허 ↔ 세 방법, 한 장으로 보는 지도 — 1개월차 마무리들어가며 — 오리엔테이션의 마지막, 한 장 지도오늘이 1개월차, 그러니까 오리엔테이션의 마지막 글입니다. 한 달 동안 꽤 많은 것을 깔아두었습니다. 처음엔 "왜 사람 손만으로는 웹 품질 점검이 버거운지"를 이야기했고, 그다음엔 "웹 품질을 보는 세 시점 — 설계·운영·판단"이라는 큰 틀을 세웠습니다. 이어서 그 세 시점을 하나씩, 운영 시점의 URL 분석과 설계 시점의 Figma 분석, 그리고 판단 시점의 LLM 분석으로 풀어드렸지요. 이번 주 월요일과 수요일에는 "그 방법들을 받치는 다섯 건의 특허"가 왜 필요했고, 기능은 베껴도 방법은 왜 못 베끼는지를 짚었습니다.오늘은 이 모든 것을 한 장으로 묶습니다. "다섯 개의 특허가 세 개의 방..

타이포 위계 점검 체크리스트

타이포 위계 점검 체크리스트ViewCheck 마케팅 홍보 — 2026년 9월 · W3 타이포(Pretendard GOV) (9/21~9/27)대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트【 공감·문제제기 】이번 주는 ‘타이포’를 다뤘다. 월요일엔 공공 사이트에서 글씨가 왜 그렇게 중요한지, 수요일엔 Pretendard GOV라는 글꼴이 왜 표준으로 자리 잡았는지를 이야기했다. 오늘은 그 마무리로, 가장 손에 잡히는 이야기를 해보려 한다. ‘우리 사이트의 글자 위계가 제대로 잡혀 있는가’를 담당자가 직접 점검하는 체크리스트다.먼저 솔직하게 털어놓자. ‘타이포 위계’라는 말을 들으면 디자이너들이나 신경 쓰는 전문 용어처럼 느껴진다. 나도 처음엔 그랬다. 글씨 크기 좀 다른 게 뭐 그리 대수..

23편 : 개방성 자동 진단의 속사정 — robots.txt·sitemap.xml, 공공사이트의 문은 얼마나 열려 있는가

23편 : 개방성 자동 진단의 속사정 — robots.txt·sitemap.xml, 공공사이트의 문은 얼마나 열려 있는가검색엔진·크롤러에게 정보를 얼마나 여는가. 두 파일의 내용을 파싱해야 비로소 보이는 것들들어가며 — '개방성'이라는 단어가 감추는 기술적 현실행안부 「전자정부 웹사이트 품질관리 지침」(고시 제2025-46호, 2025년 6월 25일 시행)은 공공 웹사이트가 갖춰야 할 7대 품질 영역 중 하나로 개방성을 명시한다. 개방성이라는 단어는 직관적으로 들린다. "우리 사이트는 열려 있습니다"라고 말하면 뭔가 다 된 것처럼 느껴지기도 한다.그런데 막상 기술적으로 들어가면 이야기가 달라진다. 검색엔진과 크롤러에게 "어디까지 와도 되고, 어디는 오지 마시오"를 알려주는 파일이 실제로 존재한다. rob..

025편 : [접근성연구·모바일] 햄버거 뒤에 숨은 길

025편 : [접근성연구·모바일] 햄버거 뒤에 숨은 길모바일 내비게이션 연구〈디지털 접근성 연구 025〉 — 이 글은 규정이 아니라 하나의 연구 관점입니다. 인용 수치·기준은 출처와 함께, 미확정 영역은 그렇다고 밝혀 작성합니다.들어가며데스크탑에서 웹사이트의 메뉴는 보통 상단에 펼쳐져 있다. 어디로 갈 수 있는지가 한눈에 보인다. 그런데 같은 사이트를 휴대폰으로 열면, 그 메뉴가 사라진다. 대신 상단 모서리에 가로줄 세 개가 쌓인 작은 아이콘 하나가 놓인다. 흔히 '햄버거 메뉴'라 불리는 이 아이콘을 눌러야, 접혀 있던 메뉴가 옆에서 미끄러져 나온다.이것은 좁은 화면에 많은 메뉴를 담기 위한 합리적 타협이다. 화면이 좁으니 메뉴를 평소엔 숨겨두고, 필요할 때 펼치게 한 것이다. 그런데 이 타협에는 대가가..

042편 : 글자 밑줄을 텍스트 링크에만 사용하고, 강조하는 부분에서 사용하지 않고 있다.KRDS 체크리스트 항목 DS-042 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊷〉 — "밑줄은 '누를 수 있다'는 약속이다": 신호를 지키는 절제0. 들어가며 — 타이포그래피의 마침표타이포그래피 16개 규칙(027~042)의 마지막입니다. 그리고 이 마지막 규칙은 작지만 중요한 약속에 관한 것입니다 —밑줄(underline)의 용도.DS-042는 밑줄을 텍스트 링크에만 쓰고, 강조에는 쓰지 말라고 규정합니다. 무언가를 강조하고 싶을 때밑줄을 긋는 건 흔한 습관인데, 왜 하지 말라고 할까요? 답은 하나 — 밑줄은 '여기를 누를 수 있다'는 약속이기 때문입니다. 그 약속을 강조용으로 남용하면, ..

공식 배너(Masthead) 완전 해부 - KRDS 공식 기준공공 사이트에 처음 들어갔을 때, 우리가 가장 먼저(그러나 가장 무의식적으로) 확인하는 게 하나 있습니다. "여기가 진짜 정부 사이트가 맞나?" 하는 의심을 0.5초 만에 가라앉히는 무언가요. 화면 맨 위, 콘텐츠가 시작되기도 전에 가느다란 띠 하나가 "이 누리집은 대한민국 공식 전자정부 누리집입니다" 같은 문장과 함께 떠 있는 걸 본 적 있으실 겁니다. 대개는 그냥 스쳐 지나갑니다. 그런데 그 한 줄이 없는 사이트에서 주민등록 정보를 입력하거나 본인인증을 하려고 하면, 어딘가 마음 한구석이 찜찜해집니다. "이거 혹시 가짜 사이트 아니야?" 하는 의심이 스멀스멀 올라오죠.그 가느다란 띠가 바로 오늘 이야기할 **공식 배너(Masthead)**입..

041편 : 본문 글자의 색상을 주로 그레이 계열로 유지하고, 주요 동작에는 primary, secondary, point, system 색상을 적용하고 있다.KRDS 체크리스트 항목 DS-041 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊶〉 — "글자 색에도 역할이 있다": 타이포그래피와 색상이 만나는 자리0. 들어가며 — 두 영역이 만나다타이포그래피의 거의 마지막 편입니다. 그리고 이 편은 타이포그래피와 색상(앞의 26편)이 만나는 자리입니다.DS-041은 글자의 색을 규정합니다. 핵심은 두 가지 — 본문 글자는 주로 그레이(Gray) 계열로 유지하고,주요 동작(버튼·링크 등)에는 primary, secondary, point, system 색상을 적용하라는 것이죠. 글자 색에..

두 엔진의 분업과 협업 — 코드 보는 엔진, 화면 보는 엔진들어가며 — 판단 시점의 문을 여는 이야기지난주까지 웹 품질을 보는 세 가지 시점을 한 바퀴 돌았습니다. 만들기 전에 보는 설계 시점, 만든 뒤에 보는 운영 시점, 그리고 그 위에서 무엇부터 손댈지를 정하는 판단 시점. 그중 설계 시점(Figma 분석)을 지난주에 다뤘고, 그 앞선 주에는 운영 시점(URL 분석)을 봤습니다. 이번 주는 마지막 남은 시점, 바로 판단 시점의 문을 엽니다.그런데 판단 시점 이야기를 제대로 하려면, 그 밑에 깔린 구조부터 짚고 가야 합니다. ViewCheck가 사이트 하나를 분석할 때, 실제로는 성격이 다른 두 개의 엔진이 함께 일합니다. 하나는 화면 뒤의 코드를 읽어 판정하는 규칙 엔진이고, 다른 하나는 실제로 그려..