ViewCheck 기술 블로그

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

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

042편 : 글자 밑줄을 텍스트 링크에만 사용하고, 강조하는 부분에서 사용하지 않고 있다.

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

공식 배너(Masthead) 완전 해부 - KRDS 공식 기준

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

041편 : 본문 글자의 색상을 주로 그레이 계열로 유지하고, 주요 동작에는 primary, secondary, point, system 색상을 적용하고 있다.

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

두 엔진의 분업과 협업 — 코드 보는 엔진, 화면 보는 엔진

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

폰트 5종 섞어 쓴 페이지, 가독성 무너진다

폰트 5종 섞어 쓴 페이지, 가독성 무너진다ViewCheck 마케팅 홍보 — 2026년 9월 · W3 타이포(Pretendard GOV) (9/21~9/27)대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트【 공감·문제제기 】월요일 글에서 ‘디자인 일관성과 토큰이 왜 중요한가’를 큰 틀로 이야기했다면, 오늘은 그 중에서도 가장 티 안 나게, 그러나 가장 꾸준히 사이트를 갉아먹는 한 가지를 콕 집어서 다루려 한다. 바로 ‘글꼴’이다. 더 정확히는 ‘한 페이지에 글꼴이 여러 종 섞여 들어와 가독성이 무너지는’ 문제다.솔직히 고백하면, 나도 처음 이 일을 할 때는 글꼴을 우습게 봤다. 색이 제각각이거나 버튼이 정체불명이면 ‘아, 이건 문제다’ 싶은데, 글꼴은 ‘뭐 좀 다르면 어때, 어차피 다 읽히..

040편 : 타이틀이 본문보다 더 눈에 띄게 적용하고 있다.

040편 : 타이틀이 본문보다 더 눈에 띄게 적용하고 있다.KRDS 체크리스트 항목 DS-040 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊵〉 — "제목은 제목다워야 한다": 위계의 기본 중의 기본0. 들어가며 — 당연하지만 자주 깨지는 원칙지금까지 타이포 계층(36·37·39편)을 통해 제목과 본문의 체계를 봤습니다. 이번 40편은 그 모든 것의 가장기본이 되는 원칙입니다 — 타이틀(제목)이 본문보다 더 눈에 띄어야 한다.너무 당연해 보이죠? 제목이 본문보다 두드러지는 건 상식입니다. 하지만 이 당연한 원칙이 의외로 자주 깨집니다.디자인 욕심에 본문을 키우거나 강조하다가, 또는 제목을 너무 절제하다가, 제목과 본문의 위계가 모호해지거나역전되는 일이 생기죠. DS-040은 이 기본..

엘리베이션(Elevation) 자가진단 - ViewCheck 5분 점검

엘리베이션(Elevation) 자가진단 - ViewCheck 5분 점검화면을 한참 보다 보면, 어떤 카드는 종이처럼 살짝 떠 있는 것 같고 어떤 영역은 바닥에 딱 붙어 있는 것처럼 느껴질 때가 있습니다. 분명 모니터는 완전히 평평한 유리판인데, 우리 눈은 거기서 "위"와 "아래", "앞"과 "뒤"를 읽어 냅니다. 어떻게 그게 가능할까요. 답은 그림자입니다. 정확히는 빛과 그림자가 만들어 내는 깊이감, 그러니까 엘리베이션(Elevation)입니다.엘리베이션은 디자인 시스템에서 가장 "조용한" 항목 중 하나입니다. 색이나 타이포그래피는 바꾸면 누구나 단번에 알아챕니다. 그런데 그림자는 조금 진해지거나 흐려져도 대부분은 알아채지 못합니다. 그냥 "어딘가 정돈돼 보인다" 혹은 "왠지 어수선하다" 정도의 막연한 ..

22편 : 웹보안 헤더 13종 진단 — HTTP 응답 한 줄이 '신뢰'를 만든다

22편 : 웹보안 헤더 13종 진단 — HTTP 응답 한 줄이 '신뢰'를 만든다HSTS·CSP·X-Frame-Options 등 13개 보안 헤더를 자동으로 점검하기까지, 우리가 배운 것들들어가며 — 눈에 보이지 않는 보안의 증거웹사이트를 방문할 때 사람들이 확인하는 건 주소창의 자물쇠 아이콘, 즉 HTTPS 여부다. 그게 '이 사이트는 안전하다'는 감각의 전부인 경우가 많다. 그런데 실제로 보안을 만드는 것들은 훨씬 더 깊은 곳에 있다. 브라우저와 서버가 주고받는 HTTP 응답 헤더(response header) — 사용자 눈에는 전혀 보이지 않는 그 한 줄 한 줄이, 방문자를 XSS 공격에서 막아주고, 클릭재킹에서 지키고, HTTPS가 아닌 연결로 흘러가지 않도록 붙잡는다.문제는 이 헤더들이 있는지, ..

039편 : 헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정하고 있다.

039편 : 헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정하고 있다.KRDS 체크리스트 항목 DS-039 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊴〉 — "제목 안에도 단계가 있다": 문서 구조를 만드는 h1~h50. 들어가며 — 제목의 '깊이'지난 편들에서 타이포 계층을 display·heading·body로 나눴습니다(37편). 이번엔 그중 heading(제목) 의내부 구조 — h1부터 h5까지의 단계입니다.제목이라고 다 같은 제목이 아닙니다. 가장 큰 대제목(h1), 그 아래 중제목(h2), 또 그 아래 소제목(h3)…이렇게 제목에도 깊이(level) 가 있습니다. 책으로 치면 '장 → 절 → 항'의 구조죠. DS-039는 이 제목의단계를 h1부터 h5까..

LLM 분석이란 — 결과와 대화하는 진단

LLM 분석이란 — 결과와 대화하는 진단들어가며 — 세 번째 시점을, 이번엔 '대화'로이번 주 월요일에는 ViewCheck가 왜 두 개의 엔진을 함께 쓰는지 이야기했습니다. 코드(DOM) 데이터를 정해진 논리로 빠르게 판정하는 규칙 엔진, 그리고 화면을 보고 코드로는 못 잡는 시각적 컴포넌트를 감지하는 시각 AI 엔진. 이 둘이 분업해서 846규칙을 판정하고, 코드가 pass/fail로 확정한 건 AI가 뒤집지 않는다는 원칙까지 짚었습니다. 그 두 엔진이 만들어내는 게 바로 "분석 결과"입니다.오늘은 그 결과 "위에서" 벌어지는 이야기입니다. 첫 주에 웹 품질을 보는 세 가지 시점을 말씀드렸지요. 만들기 전(설계), 만든 후(운영), 그리고 그 위에서(판단). 앞의 두 시점은 지지난주 URL 분석(운영)..

공공 서체 Pretendard GOV, 왜 표준인가

공공 서체 Pretendard GOV, 왜 표준인가ViewCheck 마케팅 홍보 — 2026년 9월 · W3 타이포(Pretendard GOV) (9/21~9/27)대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트【 공감·문제제기 】“글꼴 하나 바꾸는 게 뭐 그렇게 대수라고.”공공 사이트 개편을 맡았던 무렵, 나도 속으로 딱 이렇게 생각했다. 색이야 기관 상징색이 있으니 따라가면 되고, 레이아웃은 업체가 잡아줄 테고, 그런데 글꼴까지 무슨 기준을 따져야 한다니 솔직히 좀 과하다 싶었다. 화면에 글자만 잘 보이면 됐지, 그 글자가 무슨 서체인지를 누가 그렇게 신경 쓰겠나 싶었던 거다.그 생각이 바뀐 건 어느 검수 회의 자리에서였다. 업체가 가져온 시안 두 장을 나란히 놓고 보는데, 분명히 같은..

21편 : 공공웹 Core Web Vitals 실측 — LCP·INP·CLS, 브라우저가 직접 재는 성능의 언어

21편 : 공공웹 Core Web Vitals 실측 — LCP·INP·CLS, 브라우저가 직접 재는 성능의 언어"빠른 사이트"와 "느린 사이트"의 차이를 숫자로 잡으려 할 때, 우리가 만난 세 가지 지표들어가며 — "느리다"는 말은 측정이 아니다공공 웹사이트를 점검하다 보면 꼭 나오는 피드백이 있다. "이 사이트 좀 느린 것 같은데요." 그 말은 틀리지 않는다. 실제로 화면이 늦게 뜨고, 버튼을 눌러도 반응이 없고, 스크롤하면 레이아웃이 갑자기 흔들린다. 문제는 "느린 것 같다"는 말이 보고서에는 쓸 수 없다는 것이다. 담당자가 외주 개발사에 개선을 요청하려면 수치가 필요하다. "어디가 얼마나 느린지"를 숫자로 말해야, 무엇을 어떻게 고쳐야 하는지를 논의할 수 있다.그래서 우리는 ViewCheck를 만들..

038편 : 디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않고 있다.

038편 : 디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않고 있다.KRDS 체크리스트 항목 DS-038 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊳〉 — "가장 큰 글자에도 절제가 필요하다": 디스플레이의 상한0. 들어가며 — 강조에도 한계가 있다지난 37편에서 가장 큰 계층인 display(디스플레이) 를 봤습니다. 메인 배너의 큰 헤드라인처럼 시각적임팩트를 주는 영역이죠. 이번 38편은 그 display에 '과도하게 크지 마라' 는 제한을 둡니다.display는 '크게 강조하는' 영역인데, 왜 거기에 상한을 둘까요? 색의 강조(DS-008·012)에서 봤듯, 강조도지나치면 역효과이기 때문입니다. 글자가 화면을 압도할 만큼 크면, 임팩트는커녕 부담스럽고 정보..

037편 : 타이포그래피 계층을 display, heading, body로 구성하고, heading과 body 간의 글자 크기 차이를 1.25~1.5배로 설정하고 있다.KRDS 체크리스트 항목 DS-037 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊲〉 — "제목과 본문의 거리, 1.25~1.5배": 계층 비율의 황금선0. 들어가며 — 계층에 '수치'를 부여하다지난 36편에서 "글자 크기를 계층으로 정의하라"는 원칙을 봤습니다. 이번 37편은 그 계층의 구체적 구조와비율을 못 박습니다.DS-037은 두 가지를 규정합니다. 첫째, 계층을 display, heading, body 세 층으로 구성하라. 둘째, heading과body의 크기 차이를 1.25~1.5배로 설정하라. 36편이 "..

엘리베이션(Elevation) - 공공웹이 자주 틀리는 지점공공 사이트를 열었는데 화면이 어쩐지 답답하게 느껴진 적 있으실 겁니다. 분명 정보는 다 있는데 어디가 카드고 어디가 그냥 배경인지 한눈에 안 들어오고, 팝업이 떴는데 뒤 화면이랑 구분이 안 돼서 "이게 떠 있는 건가, 아니면 그냥 화면이 바뀐 건가" 헷갈리는 순간. 반대로 어떤 사이트는 카드 하나하나에 그림자가 너무 진하게 들어가서 모든 게 둥둥 떠 있는 것처럼 보여 정신이 사납기도 합니다. 우리는 그걸 그냥 "디자인이 좀 별로네" 정도로 넘기지만, 사실 그 위화감의 정체는 대부분 한 가지로 좁혀집니다. 엘리베이션(Elevation), 그러니까 화면 요소의 "높이감"을 잘못 쓴 겁니다.엘리베이션은 KRDS(대한민국 정부 디자인 시스템)의 스타일..

색상 토큰 채택률 점검법ViewCheck 마케팅 홍보 — 2026년 9월 · W2 색상 586 토큰 (9/14~9/20)대주제: 디자인 일관성·토큰 · 홍보 훅: 토큰 채택률 리포트【도입 — 공감·문제제기】이번 주 월요일엔 색상 토큰이라는 게 도대체 뭔지, 586개나 되는 색을 왜 일일이 정리해 두는지를 다뤘다. 수요일엔 토큰을 안 쓰면 사이트가 어떻게 조금씩 어긋나는지를 봤다. 그리고 오늘 금요일, 가장 손에 잡히는 이야기를 하려 한다. ‘우리 사이트가 그 색상 토큰을 실제로 얼마나 쓰고 있는지’를 담당자가 직접 점검하는 방법이다.먼저 솔직하게 털어놓자. ‘토큰 채택률’이라는 말, 처음 들으면 좀 거창하고 어렵다. 무슨 통계 지표 같고, 데이터 분석가나 들여다볼 숫자처럼 들린다. 그런데 막상 뜯어보면 ..

20편 : 행안부 7대 품질진단, ViewCheck가 자동으로 돌리는 방법 — 영역마다 측정 방식이 다르다호환성·접근성·개방성·접속성·편의성·효율성·신뢰성, 같은 '품질'이지만 재는 자가 다 다르다들어가며 — "품질진단 하셨습니까?"라는 질문의 무게해마다 공공기관 웹사이트 담당자들을 긴장시키는 행사가 있다. 행정안전부가 주관하는 전자정부 웹사이트 품질진단이다. 진단 대상이 되는 기관은 미리 자체 점검을 거쳐야 하고, 그 결과를 근거로 개선 계획을 세워야 한다. 이 일을 처음 맡아본 담당자라면 누구나 맞닥뜨리는 첫 번째 장벽이 있다."7대 영역이 뭐고, 우리 사이트는 어디서부터 보면 되지?"행안부 고시(제2025-46호)가 규정하는 전자정부 웹사이트 품질은 단순히 '잘 만든 사이트'가 아니다. 호환성·접근..

036편 : 정보 전달과 체계적인 글자 사용을 위해 계층에 맞는 글자 크기를 정의하고 있다.KRDS 체크리스트 항목 DS-036 · 디자인 스타일 > 타이포그래피〈846 규칙 완전 분해 시리즈 ㊱〉 — "글자 크기에도 질서가 필요하다": 타이포그래피 계층의 시작0. 들어가며 — 크기에 '체계'를지난 편들에서 본문 크기(16·17px)와 단위(rem)를 봤습니다. 이번엔 그 크기들을 체계적으로 정리하는이야기입니다.화면에는 여러 종류의 텍스트가 있습니다 — 큰 제목, 중간 제목, 본문, 보조 설명, 캡션. 이들의 크기가 제각각이면 화면이 산만하고, 어느 게 더 중요한지 알기 어렵습니다. 반대로 크기가 계층(hierarchy) 으로 정리되면,사용자는 크기만 보고도 '이건 큰 제목, 이건 본문'을 직관적으로 압..

엘리베이션(Elevation) 완전 해부 - KRDS 공식 기준어느 공공 사이트에서 신청서를 작성하다 화면 한가운데에 팝업이 떠오른 적 있으실 겁니다. 동의 여부를 묻는 창이거나, "정말 삭제하시겠습니까" 같은 확인 창. 그런데 어떤 사이트의 팝업은 분명히 "위에 떠 있는" 느낌이 들고, 어떤 사이트의 팝업은 뒤 배경과 뒤엉켜서 "이게 새 창인지 그냥 같은 화면의 일부인지" 헷갈립니다. 같은 팝업인데 왜 이런 차이가 날까요. 답은 의외로 단순합니다. 한쪽은 그림자를 제대로 줘서 화면에서 한 단계 떠올렸고, 다른 한쪽은 그러지 않았거든요.우리는 평소에 그림자를 거의 의식하지 않습니다. 그런데 그림자가 사라지면 그제야 그 존재를 압니다. 카드가 배경에 납작하게 붙어 버리고, 떠 있어야 할 팝업이 본문에 파묻..