내일(7월 1일) 개인 용무로 잠시 제주를 벗어나 서울에 이틀간 머물 예정인데요, 이날 5시 이후부터 여유 시간이 많아 만나서 이야기 나눌 분을 찾습니다.
자기소개 - 블로그 소개 및 Gravatar 프로필 참고
- 10여 년 전부터 웹 프로그래밍을 생산성과 취미로 즐겨하고 있는 컴퓨터 전공 4학년 학부생입니다.
- 이번 1학기에 졸업 요건을 대부분 만족하여 프런트엔드 개발 직군으로 구직 활동을 시작했습니다.
김무훈
@iamuhun@hackers.pub · 18 following · 34 followers
업으로 프로그래밍을 하는 컴퓨터 공학 학부생입니다.
토스페이먼츠 결제 시스템 연동을 돕는 MCP 서버 구현기
토스페이먼츠 문서를 로컬 MCP로 제공하고자 거친 모든 의사 결정 과정이 공유되어 있습니다.
문서 내 키워드 관련성 분석을 미리 거친 Machine-Readable 한 청크 저장소를 구축하는 노력이 가장 흥미로웠네요.
- 8월 16일-17일 파이콘 일반 참가
- 8월 23일 FEConf 발표 참가
휴가철이라 제주 ↔️ 김포 항공료 너부 부담되는데;;
https://issue.daum.net/election/2025 이번 대선 통해 처음 알았는데 다음 뉴스 포털 전체에서 Svelte 쓰나 보네...
이전부터 쭉 관리하고 있는 경력기술서 겸 포트폴리오 정보량이 너무 많다는 의견을 자주 받아서,
약식화한 별개의 RESUME 페이지를 새로 만들었다. https://www.frontend.moe/resume/
https://tech.kakaoent.com/front-end/2023/230330-frontend-solid 소프트웨어 엔지니어링 분야에서 유명한 SOLID 원칙이 프런트엔드 UI 설계 관점에서 어떻게 관련이 있는지, 카카오엔터에서 모범사례를 잘 소개가 되어서 공유합니다. 읽고 나서 해당 원칙이 서비스 아키텍쳐 설계 관점으로 한정되지 않음을 알게 되었습니다.
안녕하세요, 업으로 프로그래밍을 하고 있는 컴퓨터 학부생 김무훈입니다.
현재 3년차 웹 프론트엔드 개발자로서, 다가오는 7월부터 함께할 정규직 포지션을 적극적으로 찾고 있습니다.
최근 학과 사무실에서 졸업 요건을 확인한 결과, 전공 필수 한 과목과 전공 선택 2학점(총 5학점)이 남아있음을 확인했습니다.
본래는 다음 2학기까지 수료 후 내년 2월에 졸업할 예정이었으나, 교수진과 상의한 결과 취업 및 재직이 확정된다면 수업 이수 방식을 보다 유연하게 결정할 수 있다는 긍정적인 답변을 받아 적극적으로 조기 취업을 추진하게 되었습니다.
이는 전공 필수 과목의 경우에만 해당이 되는 문제이고, 전공 선택 2학점의 경우 앞으로의 여름 학기 현장 실습 또는 다음 학기에 개설되는 하나의 원격 강의로 대체하여 문제가 없는 상태입니다.
지금까지의 업무 경험과 프로젝트는 아래의 포트폴리오에서 확인하실 수 있습니다.
📌 경력기술서 겸 포트폴리오 페이지: https://www.frontend.moe/portfolio/
좋은 인연을 찾을 수 있도록, 많은 관심과 연락 부탁드립니다!
학과 책장에 11년 전에 출간한 웹 접근성 책을 찾았습니다.
책 목차를 살펴보니 WCAG 표준에서 제정한 아래 4가지 원칙을 개별마다 많은 사례를 바탕으로 다루고 있네요.
- 인지할 수 있는(Perceivable)
- 조작 가능한(Operable)
- 이해할 수 있는(Understandable)
- 견고함(Robust)
자료가 오래되었지만 흥미 있는 사례집이라 읽어 보려고 합니다.
![2부 웹 접근성 기본 4원칙
3장 인식의 용이성: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다
3.1
[검사항목 1] 적절한 대체 텍스트 제공 ... 111
3.1.1 [오류유형 1-1] 텍스트 이미지의 대체 텍스트 미 제공 ..• 113
3.1.2 [오류유형 1-1] 불충분한 대체 텍스트를 제공한 경우 ... 115
3.1.3 [오류유형 1-1] 대체 텍스트가 오타로 표기된 경우 ... 117
3.1.4 [오류유형 1-1] 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 ... 118
3.1.5
[오류유형 1-1] 게시물의 이미지에 대체 텍스트가 제공되지 않은 경우 ... 119
3.1.6
[오류유형 1-2] 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 ... 121
3.1.7
[오류유형 1-2] 의미 없는 이미지에 대체 텍스트를 제공한 경우 ... 123
3.1.8 [오류유형 1-2] 분리된 이미지 조각의 대체 텍스트 제공 ... 124
3.1.9 [오류유형 1-3] 〈Iongdesc〉의 파일이 없거나 연결되지 않은 경우... 125
3.1.10 [오류유형 1-3] 〈longdesc〉 내용이 의미나 기능을 파악하기 어려운 경우 ... 126
3.1.11 [오류유형 1-4] 이미지맵의 〈img〉 요소에 alt 속성을 제공하지 않은 경우 ... 129
3.1.12 [오류유형 1-5] 조직도 이미지맵의 〈area〉로만 대체 텍스트를 제공한 경우 ... 131
3.1.13 [오류유형 1-6] 대체 텍스트를 tite만으로 제공하는 경우 ... 133
3.1.14 [오류유형 1-7 QR 코드의 이동 주소 정보를 대체 텍스트 등으로 제공하지 않은 경우
... 133
3.1.15 [오류유형 1-8] 의미 있는 배경 이미지의 대체 콘텐츠를 제공하지 않은 경우 ... 135
3.1.16 [오류유형 1-8] 의미 있는 색상 배경 이미지에 대체 콘텐츠를 제공하지 않은 경우 ... 137
3.1.17 [오류유형 1-9] 플래시 콘텐츠에 대체 텍스트를 제공하지 않은 경우 ... 138
3.1.18 [오류유형 1-9] 웹 애플리케이션의 대체 콘텐츠가 접근성이 없는 경우 ... 141](https://media.hackers.pub/note-media/936d8e0a-f0d2-46f4-809f-97294ac5d7e7.webp)
![4장 운용의 용이성: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 한다
4.1
[검사항목 기 키보드 사용 보장 ... 191
4.1.1 [오류유형 1-1] 이미지에 onclick 이벤트를 적용하여 키보드로 제어할 수 없는 경우 ... 198
4.1.2 [오류유형 7-1] 키보드 이벤트를 적용하지 않아 키보드 접근이 안 되는 경우 ... 195
4.1.3 [오류유형 7-11 readonly 속성을 사용하여 대체 수단이 비활성화되는 경우 ... 197
4.1.4 [오류유형 1-1 마우스용 자바스크립트 사용으로 키보드 이용이 불가능한 경우 ... 198
4.1.5 [오류유형 7-2] 플래시 wmode 값 설정으로 키보드 이용이 불가능한 경우 ... 200
4.1.6 [주의사항 7-1] 웹 접근성 품질인증심사에서는 IE8 브라우저에서 키보드 테스트함 ... 203
4.1.7 [주의사항 7-21 onclick 이벤트 핸들러에 키보드로 제어가 불가한 경우 감점 ... 203
4.1.8 [주의사항 7-3] 예외 콘텐츠라도 주변 인터페이스는 키보드로 사용할 수 있어야 함 ... 203
4.1.9 [주의사항 7-4] 키보드로 탭메뉴에서 탭 내용을 확인할 수 없는 경우 감점 ... 204
4.1.10 [주의사항 7-5 oniocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 204
4.1.11 [주의사항 7-61 wmode를 transparent, opaque로 지정 시 화면 낭독기 인식 불가능
... 205
4.2
[검사항목 8] 초점 이동 ... 206
4.2.1 [오류유형 8-1] 초점의 이동 순서가 논리적이지 않으며 일관성이 없는 경우 ... 207
4.2.2 [오류유형 8-21 초점의 위치가 시각적으로 표시되지 않은 경우 .•. 209
4.2.3 [오류유형 8-3] 〈area〉 요소의 순서가 키보드 순서와 다른 경우 ... 213
4.2.4 [주의사항 8-11 onfocus="this.blur0;" 사용 시, 검사항목 7, 8, 16에서 감점 ... 214
4.3
[검사항목 9] 응답시간 조절 ... 215
4.3.1 [오류유형 9-1] 페이지 재이동 시 회피할 수 있는 수단을 제공하지 않은 경우 ... 216](https://media.hackers.pub/note-media/ab959b1c-f2a1-416f-a9e9-f80c0b31bedf.webp)
![5장 이해의 용이성: 콘텐츠는 이해할 수 있어야 한다
5.1
[검사항목 15] 기본 언어 표시 ... 257
5.1.1
[오류유형 15-11 〈html〉에 lang 속성을 명시하지 않은 경우 ... 258
5.1.2
[오류유형 15-1] 〈html〉에 lang 속성을 잘못 명시한 경우 ... 259
5.1.3 [주의사항 15-1] lang 속성값에 국가별 지정언어 코드를 사용해야 함 ..• 260
5.1.4 [주의사항 15-21 페이지 중간에 언어가 바뀔 때 lang 속성으로 명시해주는 것을 권장 ... 262
5.2
[검사항목 16] 사용자 요구에 따른 실행 ... 263
5.2.1
[오류유형 16-1] 사용자가 예측하지 않은 새 창이 열리는 경우 ... 264
5.2.2
: [오류유형 16-1] 사전에 알리지 않은 새 창이 발생되는 경우 ... 267
5.2.3 [오류유형 16-2] 웹사이트 초기화면에 팝업창을 제공하는 경우 ... 268
5.2.4 [오류유형 16-3] 사용자가 의도하지 않은 초점 변화가 발생하는 경우 ... 271
5.2.5 [오류유형 16-4] 입력 서식의 값 변경만으로 제출되어 문맥이 바뀌는 경우 ... 273
5.2.6 [오류유형 16-4] 체크상자의 선택만으로 값이 제출되어 문맥이 바뀌는 경우 ... 274
5.2.7 [주의사항 16-1] onkeypress에 의해 포커스를 옮기는 동작만으로 새 창이 발생하면 감점
... 275
5.2.8 [주의사항 16-21 〈a targel="_blank">로만 새 창을 알린 경우는 감점하지 않음 ... 276
5.2.9
[주의사항 16-3] onfocus="this.blur)" 사용 시, 검사항목 7, 8, 16에서 감점 ... 276](https://media.hackers.pub/note-media/73ac2eb4-b098-4454-b5df-9c6757ffa581.webp)
![6장 견고성: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 최대한 호환되어야 한다
6.1
[검사항목 21] 마크업 오류 방지 ... 317
6.1.1 [오류유형 21-1] 태그의 열고 닫음 오류 ... 318
6.1.2 [오류유형 21-2] 태그의 중첩 오류 ... 319
6.1.3 [오류유형 21-3] 중복 선언된 속성 오류 ... 320
6.1.4 [주의사항 21-1] ID 값 중복 선언은 오류유형 21-3에서 심사 ... 320
6.1.5 [주의사항 21-2] 위에 언급된 항목 이외의 표준문법 오류는 포함하지 않음 ... 321
6.1.6 마크업 오류 세부 사례 ... 321
6.1.6.1 [열고 닫음 오류 사례 1 (a) 요소 여는 태그 미 제공 ... 321
6.1.6.2 [열고 닫음 오류 사례 2 〈ul〉 요소 여는 태그 미 제공 ... 322
6.1.6.3 [열고 닫음 오류 사례 31 div》요소 여는 태그 미 제공 ... 323
6.1.6.4 [열고 닫음 오류 사례 41 〈a〉 요소 닫는 태그 미 제공 ... 323
6.1.6.5 [열고 닫음 오류 사례 5] 《strong〉 요소 닫는 태그 미 제공 ... 324
6.1.6.6 [열고 닫음 오류 사례 61 〈h 요소 닫는 태그 미 제공 ... 325
6.1.6.7 [태그의 중첩 오류 사례] 《p》와 《strong》의 중첩 제공 ... 326
6.1.6.8 [속성 중복 오류 사례 11 〈p〉 요소에 대한 style》 속성 중복 제공 ... 326
6.1.6.9 [속성 중복 오류 사례 2] ID 속성 중복 제공 ... 327
6.2
[검사항목 22] 웹 애플리케이션 접근성 준수 ... 330
6.2.1 [오류유형 22-1] 접근성이 없는 웹 애플리케이션의 대체 콘텐츠가 없는 경우 ... 331
6.2.2 [오류유형 22-1] 대체 콘텐츠가 핵심 기능을 동등하게 제공하지 못한 경우 ... 332](https://media.hackers.pub/note-media/fd2e3ccf-e307-4908-979f-80338e4b39ca.webp)
와 오늘 졸업상담한 결과로 적어도 강의 두개만 더 들으면 된다고 안내받았습니다. 여름방학 현장실습 따내면 다음 학기에 전필 하나만 이수하면 졸업 될 듯...
<section> 버리고 <article> 써야 하는 이유 #a11y
〈section〉태그 안의 글에 헤딩(제목)을 포함하면 화면상에서는 그 헤딩들이 논리적인 순차 구조를 가지고 있는 것처럼 보인다. 하지만 이는 순전히 시각적인 것일 뿐 보조 기술과 연동된 구조 정보가 아니다.〈section〉태그의 용도는 무엇이고, 헤딩을 어떻게 코딩해야 보조 기술 사용자에게 정말 중요한 구조 정보를 전달할 수 있을까?
@hongminhee洪 民憙 (Hong Minhee) 오 해커스펍 가로 뷰포트 오버플로우를 끼치는 모든 컴포넌트가 전면 수정되었나 보네요. 스크롤 경험이 쾌적해져서 무척이나 편합니다!
Gravatar 프로필에 페디버스 계정 인증이 가능하네요~ 따라서 제 프로필에 해커스펍 계정을 추가했습니다.
한번 저 개발자나 해볼까요? - 일단 "하지 마세요."
위 글에서 이야기하는 "신입 티"를 벗어나 더 나은 해결책과 서비스 구조를 생각해내기 위해 부단히 고민하며 자아성찰을 하고, 적정한 의사결정을 위해 집중하는 소프트웨어 공학도가 과연 얼마나 될까나 궁금하다.
일단 제 경우에는 불완전하다고 스스로 평가해서 항상 부단히 나아지고자 노력하고 있습니다.
3년차 웹 프런트엔드 개발자입니다. 잠시 10주 여름 방학 동안 계약직으로 일할 수 있는 직장을 찾고 있습니다. (6월 마지막 주부터 8월 마지막 주) http://frontend.moe/portfolio/
올해 2학기까지 수료하면 졸업 예정이라, 학부 졸업 이후 정규직 전환 조건으로도 희망하고 있습니다.
해커스펍 포스트에 유저네임 및 핸들 텍스트가 넘쳐서 페이지 전체에 가로 스크롤이 생기는 게 불편해서 직접 패치 제안드렸다. https://github.com/hackers-pub/hackerspub/pull/33
내가 아는 바이브 코딩은 음주 코딩이었는데...
오 안녕하세요, 웹 몇 개월 전에 직접 운영하고 계신 접근성 사이트맵을 접한 프런트엔드 프로그래머입니다.
개인 블로그에 올릴 웹 접근성이 UI 설계에 중요한 이유 - 웹 접근성의 의의와 의미론적인 CSS 규칙을 설계하는 방법 초안 작성을 마치고 퇴고 작업을 거치는 중입니다. 레퍼런스 검증 등 객관성이 중요한 분야이다 보니, 작업 중간에 몇몇 전문가 분의 의견을 받고 싶어 커뮤니티 가입을 신청했습니다.
그리고 글 맨 하단 섹션에 글을 기획하며 찾은 외부 자료에 대해 목록을 추렸어서 참고 문서 추가에 도움이 되지 않을까 싶습니다.
![참고하면 좋은 자료
접근성 기반 UI 컴포넌트 설계 자료
직접 실습으로 익히는 것을 권하고자 바로 행동으로 옮겨 실천할 수 있는 자료를 중심으로 골랐습니다.
논리적 설계와 HTML5 아웃라인 알고리즘: 웹의 근본인 HTML의 논리적 설계를 바탕으로 React 컴포넌트 디자인에 대해서 고민해 보고 아웃라인 알고리즘에 대해서 간단하게 알아보는 글입니다.
접근성이 이끄는 웹 프런트엔드 테스트 자동화 : Wonderwall Tech: 여러 웹 표준 접근성 요소를 바탕으로 컴포넌트 마크업과 제어 상태를 설계하여, 이를 종단 테스트 수트의 시멘틱 플래그(Semantic Flag)로 활용할 수 있다고 소개한 글입니다.
PandaCSS와 함께 CSS-in-JS의 미래로 : Wonderwall Tech: 바로 위 항목의 동 저자이신 김태희님의 의미론적 CSS 작성법에 대해 최근의 CSS-in-JS 도구 사용 측면으로 다룬 글입니다.
Open UI: W3C 커뮤니티 그룹 중 하나로, 기본 HTML 사양에는 없어 별도 구현이 필요한 UI 컴포넌트에 대한 모범 사례를 정리하여 연구하는 커뮤니티입니다.
Inclusive Components: 포괄적인(Inclusive) 여러 웹 인터페이스 설계 패턴이 수록된 블로그입니다.
블로그 배너에 전자책 발간이 소개되어 있는데, 이미 국내에서 『인클루시브 디자인 패턴』이라는 제목으로 웹액츄얼리코리아를 통해 번역 출간되었습니다.
웹 접근성 학습 자료
AOA11Y 접근성 오픈 아카데미 - YouTube: 정보접근성 인식 개선 및 확산을 목표로 NIA이 운영하는 YouTube 채널입니다. 해당 기관에서 만든 항공사 접근성 사례집 또한 유용합니다.
웹 애플리케이션 엔지니어를 위한 웹 접근성의 기초 - azukiazusa.dev (일본어)
웹 프런트엔드 구현에서 원본 기능을 손상시키지 마십시오 - azukiazusa.dev (일본어)
WAI-ARIA를 배울 때 정리해 두고 싶은 것 - Hirao Yusuke (일본어)
[명세 읽는 법] HTML의 요소를 어떻게 배울 것인가 (일본어)
표준 명세를 통해 어떤 HTML 엘리먼트에 대한 콘텐츠 모델과 어트리뷰트, 접근성 고려 사항 등의 규칙을 파악하는 법을 소개합니다. 웹 표준 명세를 읽는 걸 낮설어 하시는 분에게 추천드립니다.
제 경우 MDN 문서만으로 어떤 엘리먼트의 기술 사양을 파악하기에 애매하거나 누락된 부분에 대해 WHATWG 명세를 직접 참고하고 있습니다.6
웹 접근성 참고 자료
레진 WAI-ARIA 가이드라인
How to Meet WCAG (Quick Reference) | W3C, GitBook 형태의 WCAG 2.1 한국어 가이드
https://a11ykr.github.io: KWCAG 및 W3C 한국어 초벌 번역 모음 사이트맵입니다.](https://media.hackers.pub/note-media/ea8ee85c-ff76-4036-86ed-2ee7c0492fb1.webp)
https://www.frontend.moe/posts/naver-2025-coding-test/ 팀네이버 코딩 테스트 후기를 개인 블로그에 올려두었습니다. 꾸준히 일할 수 있는 지속 가능한 소프트웨어 엔지니어로서의 삶을 지켜내고자 반성글을 쓰게 되었습니다(...)
해커펍은 퍼머링크로 아카이빙 참조하기 최적이라 생각해서 앞으로 기술을 다루며 기록 및 참조하는 용도로 잘 사용하려고 합니다.
트위터는 나중에 다른 사람에게 보여줄 참조용으로 쓰기에는 너무 정보 대비 소음이 많은 특성 때문에 잘 맞지 않는다고 생각합니다.