김무훈

@iamuhun@hackers.pub · 14 following · 26 followers

업으로 프로그래밍을 하는 컴퓨터 공학 학부생입니다.

Profile
muhun.kim
GitHub
@mu-hun
robin @robin_maki@planet.moe
Quiet public

ㅁㄴㄹㅁ어라ㅣㅁㅇㅓㅏㅣㄴ어ㅣㅁ너ㅣㅁ어ㅣㅁㄴㅓㅏㅣㅇㅓㅏㅣㅇㅓㅏㅣㅁ너ㅁㅇㅣㅓ먀드랮두퍄ㅐ두랴주ㅏㅓㅗ쟈ㅕㅜㄹㅊ재ㅑㅕ륯야라퐁룾야ㅐ처ㅗㄹㅇ더ㅣㅏㅗㄹ푸ㅑㅕㅐㅗㅓ룿퍄ㅕㄴ아ㅜㅡㄷㅑㅕㅔㅇㅏㅓ리ㅜ퍄ㅕㅔㅏㅇ

0
0
0
Hong Segi (aka khris) @khris@hackers.pub
Quiet public

@iamuhun김무훈 안녕하세요. 저희 팀은 사내의 개발자들이 사용하는 자체 모니터링/옵저버빌리티 플랫폼(예: Datadog)을 개발하고 있는데요, 현재 웹 프론트엔드 엔지니어를 구인중입니다. 관심있으시면 채용공고를 한번 봐 주세요: https://careers.linecorp.com/ko/jobs/2657 궁금한점이 있으시면 멘션 주시면 됩니다.

Frontend Software Engineer (Observability Platform)

Bundang / Korea | LINE Plus | Engineering | Web Development | Full-time | 2025-04-30 ~ 채용시까지

careers.linecorp.com

김무훈 @iamuhun@hackers.pub
Quiet public

@khrisHong Segi (aka khris) 답글 감사합니다! LangDev에 올리신 채팅으로 해당 공고를 미리 알게 되었습니다.

본문에 적었듯이, 제가 올해 하반기에 전공 필수 이수가 하나가 남아 있어서, 재직 증명을 바탕으로 교수진과 유연한 수업 이수 방식에 대한 추후 협의가 필요한 상황인데요.

제가 지원하는 직무와 연관이 있는 조직 내 동료 등 여러 이해관계자에게 이런 상황의 지원자가 지원해도 괜찮은지 사전에 확인을 받고 싶습니다.

0
1
0
김무훈 @iamuhun@hackers.pub
Public

안녕하세요, 업으로 프로그래밍을 하고 있는 컴퓨터 학부생 김무훈입니다.
현재 3년차 웹 프론트엔드 개발자로서, 다가오는 7월부터 함께할 정규직 포지션을 적극적으로 찾고 있습니다.

최근 학과 사무실에서 졸업 요건을 확인한 결과, 전공 필수 한 과목과 전공 선택 2학점(총 5학점)이 남아있음을 확인했습니다.
본래는 다음 2학기까지 수료 후 내년 2월에 졸업할 예정이었으나, 교수진과 상의한 결과 취업 및 재직이 확정된다면 수업 이수 방식을 보다 유연하게 결정할 수 있다는 긍정적인 답변을 받아 적극적으로 조기 취업을 추진하게 되었습니다.

이는 전공 필수 과목의 경우에만 해당이 되는 문제이고, 전공 선택 2학점의 경우 앞으로의 여름 학기 현장 실습 또는 다음 학기에 개설되는 하나의 원격 강의로 대체하여 문제가 없는 상태입니다.

지금까지의 업무 경험과 프로젝트는 아래의 포트폴리오에서 확인하실 수 있습니다.
📌 경력기술서 겸 포트폴리오 페이지: https://www.frontend.moe/portfolio/

좋은 인연을 찾을 수 있도록, 많은 관심과 연락 부탁드립니다!

포트폴리오

오픈소스, 상호작용과 접근성, 개발자 경험에 관심을 갖고 이 세 가지를 만족하는 웹 프로그래밍을 하고 있습니다. 3년여 동안 여러 스타트업을 거치며 웹 프런트엔드 엔지니어링을 주 업무로 경험했습니다.

www.frontend.moe · 프엔모에

8
1
0
김무훈 @iamuhun@hackers.pub
Public

학과 책장에 11년 전에 출간한 웹 접근성 책을 찾았습니다.

책 목차를 살펴보니 WCAG 표준에서 제정한 아래 4가지 원칙을 개별마다 많은 사례를 바탕으로 다루고 있네요.

  • 인지할 수 있는(Perceivable)
  • 조작 가능한(Operable)
  • 이해할 수 있는(Understandable)
  • 견고함(Robust)

자료가 오래되었지만 흥미 있는 사례집이라 읽어 보려고 합니다.

책장 중간에 "장애인차별금지법 대응을 위한 웹 접근성과 품질인증 류영일 • 하성필 • 김혜일 • 성영한 지음 에이콘"라고 적힌 책이 놓여 있다.| 지은이 류영일 2007년부터 2012년까지 한국정보화진흥원에서 웹 표준과 웹 접근성 관련 업무 를 맡아왔으며, 웹 접근성 품질인증마크 담당과 법 제도 T/F를 운영하여 지금의 국가정보화기본법 개정 내용을 만들었다. 부족한 인증심사 기준을 제시하기 위 해 좀 더 구체적인 웹 접근성 품질인증심사가이드를 제작하는 등 다양한 웹 접근 성 업무를 추진해왔다. 현재 웹 접근성 컨설턴트로 일하고 있으며, 다수의 강의 및 컨설팅, 자문을 수행 중이다. 특히 접근성이 웹에 머물지 않고 모바일 분야와 소프트웨어, 제품, 서비스까지 확장되어야 한다는 생각으로 접근성 연구회를 설 립하여 기반 기술을 사회에 제시하고 웹 접근성을 알 수 있는 기회를 제공하는 등 사회 곳곳에 접근성을 향상시키는 연결 구조를 만들기 위해 노력하고 있다. 하성필 1999년 웹 제작을 시작한 이후 웹 디자이너, 기획자 등을 거처 현재 웹 퍼블리셔 및 웹 접근성 컨설턴트로 일하고 있다. 다양한 웹 기술 분야의 경험을 바탕으로 다수의 웹 접근성과 웹 퍼블리싱 강의를 하며, 웹 접근성의 모호한 영역까지 모두 실무적으로 구현할 수 있는 실력의 소유자다. 김혜일 국내에서 점유율이 가장 높은 화면 낭독기 개발 기업의 기술자문 경험을 바탕으로 한 사용자 평가와 저시력 사용자에 대한 웹 접근성 전문가다. 실제 시각장애인이 면서 다수의 웹 접근성 관련 사용자 평가 경험을 바탕으로 현재는 전문가 평가로 영역을 확대했으며 다양한 웹사이트, 모바일 앱 등 접근성 평가와 자문을 진행하 고 있다. 스스로 시각장애로 인해 느끼는 불편을 누구보다 잘 알기에 실제 사용성 을 높일 수 있도록 지침 이외의 영역에 대한 접근성 개선을 소명으로 생각하는 접 근성 지킴이다. 성영한 자바와 관련해서 10년 이상 개발을 하다가 우연한 기회로 접근성을 접한 후, 퍼 블리셔 위주의 접근성을 개발자들도 모두 기본적으로 숙지해야 한다는 생각을 하 게 됐다. 사회 비용이 증가하더라도 웹을 사용하는 모든 사용자에게 평등한 기회 를 부여해야 한다는 철학하에 현재는 웹 접근성을 자동화할 수 있는 자바스크립 트를 연구하고 있고, 웹뿐만 아니라 모바일까지 연구 범위를 확대하고 있다.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] 웹 애플리케이션의 대체 콘텐츠가 접근성이 없는 경우 ... 1414장 운용의 용이성: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 한다 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] 페이지 재이동 시 회피할 수 있는 수단을 제공하지 않은 경우 ... 2165장 이해의 용이성: 콘텐츠는 이해할 수 있어야 한다 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에서 감점 ... 2766장 견고성: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 최대한 호환되어야 한다 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
1
0
0
김무훈 @iamuhun@hackers.pub
Public

와 오늘 졸업상담한 결과로 적어도 강의 두개만 더 들으면 된다고 안내받았습니다. 여름방학 현장실습 따내면 다음 학기에 전필 하나만 이수하면 졸업 될 듯...

5
0
0
김무훈 @iamuhun@hackers.pub
Public

<section> 버리고 <article> 써야 하는 이유

〈section〉 태그 안의 글에 헤딩(제목)을 포함하면 화면상에서는 그 헤딩들이 논리적인 순차 구조를 가지고 있는 것처럼 보인다. 하지만 이는 순전히 시각적인 것일 뿐 보조 기술과 연동된 구조 정보가 아니다. 〈section〉 태그의 용도는 무엇이고, 헤딩을 어떻게 코딩해야 보조 기술 사용자에게 정말 중요한 구조 정보를 전달할 수 있을까?

<section>을 버리고 HTML5의 <article>을 써야 하는 이유

각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 <h1>, <h2>··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 <h> 태그에 <section>을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. <section>은 구획을 나눌 때 쓰세요. <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그입니다. 보조 기술을 사용하지 않는 사용자에게는 아무 영향을 주지 않으니 적극적으로 활용하셔도 됩니다. <article>은 여러모로 유용합니다. 블로그 기사를 만들 수 있을 뿐만 아니라 스스로 독자적인 페이지가 될 수도 있습니다. 유튜브 홈페이지에서는 동영상을 <article> 태그에 넣어 나열하는 식으로 이용할 수도 있습니다. 다른 요소를 추가하기보다 태그의 기본 기능을 올바르게 적용한 웹 페이지를 만들 수 있기를 바랍니다.

webactually.com · Webactually

김무훈 @iamuhun@hackers.pub
Public

section 의 깊이에 따라 헤딩의 글꼴 크기가 달라지는 기본 CSS Rules 스펙이 접근성 트리를 챙기지 않아 아무 의미가 없다고 위 글에 적혀 있는데요,

최근에 이 글꼴 크기 지정에 관한 스펙이 제거된다는 글이 문득 다시 생각나서 같이 공유합니다. https://news.hada.io/topic?id=20275

h1 태그의 기본 스타일이 변경됩니다 | GeekNews

주요 브라우저들이 <h1> 태그의 기본 스타일(UA 스타일)을 변경하는 업데이트를 진행 중임특히 중첩된 section, article, nav, aside 등의 내부에서 사용된 <h1>에 영향을 줌개발자들은 이 변경으로 인해 사이트에 예기치 않은 스타일 변화나 Lighthouse 경고가 발생할 수 있으므로 주의가 필요함어떤 점이 바뀌는가HTML 명세에는 한

news.hada.io · GeekNews

1
0
0
김무훈 @iamuhun@hackers.pub
Public

<section> 버리고 <article> 써야 하는 이유

〈section〉 태그 안의 글에 헤딩(제목)을 포함하면 화면상에서는 그 헤딩들이 논리적인 순차 구조를 가지고 있는 것처럼 보인다. 하지만 이는 순전히 시각적인 것일 뿐 보조 기술과 연동된 구조 정보가 아니다. 〈section〉 태그의 용도는 무엇이고, 헤딩을 어떻게 코딩해야 보조 기술 사용자에게 정말 중요한 구조 정보를 전달할 수 있을까?

<section>을 버리고 HTML5의 <article>을 써야 하는 이유

각 태그는 목적에 맞게 쓰여야 합니다. 제목을 표시할 때는 헤딩 태그를 <h1>, <h2>··· 순차적으로 나열하는 구조여야 합니다. 같은 레벨의 <h> 태그에 <section>을 둘러싸서 제목 크기를 조절하는 방법은 겉모양만 달라질 뿐입니다. <section>은 구획을 나눌 때 쓰세요. <main>, <header>, <footer>, <nav> 등은 스크린리더 사용자에게 매우 유용한 태그입니다. 보조 기술을 사용하지 않는 사용자에게는 아무 영향을 주지 않으니 적극적으로 활용하셔도 됩니다. <article>은 여러모로 유용합니다. 블로그 기사를 만들 수 있을 뿐만 아니라 스스로 독자적인 페이지가 될 수도 있습니다. 유튜브 홈페이지에서는 동영상을 <article> 태그에 넣어 나열하는 식으로 이용할 수도 있습니다. 다른 요소를 추가하기보다 태그의 기본 기능을 올바르게 적용한 웹 페이지를 만들 수 있기를 바랍니다.

webactually.com · Webactually

3
2
0
2
1
0
8
1
0
김무훈 @iamuhun@hackers.pub
Public

한번 저 개발자나 해볼까요? - 일단 "하지 마세요."

"머리가 깨어나는 듯 충격을 받았던 순간은 실력이 좋은 다른 개발자들이 일하는 모습을 보고 영감을 받았던 때다. 하지만 내가 행동하던 방식을 일부 버리고 극복해야 하는 과정이기 때문에 쉽지 않다."

위 글에서 이야기하는 "신입 티"를 벗어나 더 나은 해결책과 서비스 구조를 생각해내기 위해 부단히 고민하며 자아성찰을 하고, 적정한 의사결정을 위해 집중하는 소프트웨어 공학도가 과연 얼마나 될까나 궁금하다.

일단 제 경우에는 불완전하다고 스스로 평가해서 항상 부단히 나아지고자 노력하고 있습니다.

2023-10-01 근데 한번 저 개발자나 해볼까요?

라고 누군가 내게 물어본다면

saengmotmi.netlify.app

0
0
0
김무훈 @iamuhun@hackers.pub
Public

한번 저 개발자나 해볼까요? - 일단 "하지 마세요."

"머리가 깨어나는 듯 충격을 받았던 순간은 실력이 좋은 다른 개발자들이 일하는 모습을 보고 영감을 받았던 때다. 하지만 내가 행동하던 방식을 일부 버리고 극복해야 하는 과정이기 때문에 쉽지 않다."

위 글에서 이야기하는 "신입 티"를 벗어나 더 나은 해결책과 서비스 구조를 생각해내기 위해 부단히 고민하며 자아성찰을 하고, 적정한 의사결정을 위해 집중하는 소프트웨어 공학도가 과연 얼마나 될까나 궁금하다.

일단 제 경우에는 불완전하다고 스스로 평가해서 항상 부단히 나아지고자 노력하고 있습니다.

2023-10-01 근데 한번 저 개발자나 해볼까요?

라고 누군가 내게 물어본다면

saengmotmi.netlify.app

1
1
0
1
0
0
정아름 @jarm@qdon.space
Quiet public
Shared by 김무훈

해킹 관련 뉴스에서 "지금까지 악용된 사례는 확인되지 않았다"는 악용된 적이 없다는 뜻이 아니라 말장난입니다 여러분
이해가 가기 쉽게 설명하자면 저는 페이커에게 리그오브레전드를 져 본 적이 없습니다

1
0
0
김무훈 @iamuhun@hackers.pub
Quiet public

@hongminhee洪 民憙 (Hong Minhee) 아.. 이거 관련한 일이 생각이 나는데 펜슬컴퍼니 재직 당시 CTO 분이 JSX를 피하고 싶어해서 satori로 레이아웃 그릴 때 직접 Object를 한땀 한땀 작성하셨었어요... 🤣 cc @robin_makirobin https://github.com/penxle/withglyph/blob/c82d4ade/apps/website/src/lib/server/rest/routes/opengraph.ts#L50-L212 https://github.com/penxle/withglyph/blob/c82d4ade/apps/website/src/lib/server/utils/image.ts#L179-L287

글리프 - 이야기가 모여 즐거움이 되다. Contribute to penxle/withglyph development by creating an account on GitHub.

withglyph/apps/website/src/lib/server/rest/routes/opengraph.ts at c82d4adefd2ac90ec0d29a83999f93e607da1925 · penxle/withglyph

글리프 - 이야기가 모여 즐거움이 되다. Contribute to penxle/withglyph development by creating an account on GitHub.

github.com · GitHub

1
0
0
bgl gwyng @bgl@hackers.pub
Public

JS에서는 라이브러리의 함수를 쓸때 this binding이 되어있는지 아닌지를 몰라서 a = b.c라고 마음대로 못 쓰고 a = (x) => b.c(x)가 되는지 먼저 꼭 확인해야한다. 안습;;

0
1
0
김무훈 @iamuhun@hackers.pub
Public

3년차 웹 프런트엔드 개발자입니다. 잠시 10주 여름 방학 동안 계약직으로 일할 수 있는 직장을 찾고 있습니다. (6월 마지막 주부터 8월 마지막 주) http://frontend.moe/portfolio/

올해 2학기까지 수료하면 졸업 예정이라, 학부 졸업 이후 정규직 전환 조건으로도 희망하고 있습니다.

포트폴리오

오픈소스, 상호작용과 접근성, 개발자 경험에 관심을 갖고 이 세 가지를 만족하는 웹 프로그래밍을 하고 있습니다. 3년여 동안 여러 스타트업을 거치며 웹 프런트엔드 엔지니어링을 주 업무로 경험했습니다.

www.frontend.moe · 프엔모에

4
0
0
김무훈 @iamuhun@hackers.pub
Public

프로필 이미지 및 팔로우 버튼이 쪼그라드는 문제가 매번 신경쓰였는데, 이전 문제와 연쇄적인 종속적인 문제로 파악을 해서 우선 포크 레포지토리에 임시로 올려두었다.

프로필 페이지 이전 이후 Screenshot 2025-04-22 at 9 26 13 PM Screenshot 2025-04-22 at 9 33 21 PM 타임라인 페이지 이전 이후 Screenshot 2025-04-22 at 9 34 11 PM Screenshot 2025-04-22 at 9 34 30 PM
0
0
0
9
0
0
1
0
0
Joeun Kim @eunjo@hackers.pub
Public
Shared by 김무훈

터미널에 대해 궁금한 점이 생겨 자료를 찾다 보니 Windows Console Team에서 연재한 시리즈물을 발견했는데, 그 내용이 참 유익했다.

Windows Command-Line Series:

  1. Backgrounder
  2. The Evolution of the Windows Command-Line
  3. Inside the Windows Console
  4. Introducing the Windows Pseudo Console (ConPTY)
  5. Unicode and UTF-8 Output Text Buffer

콘솔 앱이 터미널과 입출력을 주고 받는 것을 공기처럼 당연하다고 생각했는데, 그 과정에는 커서 이동이나 개행 등과 같은 제어 문자를 렌더링하거나 SIGINT 같은 시그널을 발생시켜주는 처리가 존재했다. 터미널과 콘솔 앱이 서로 분리된 구조가 과거 물리 터미널로부터 비롯된 것도 흥미로웠고 말이다. 사실 이해 못 한 부분이 아직 많아서 다음에 또 읽어볼 생각이다.

Windows Command-Line: Backgrounder

This is the first of a series of posts in which we’ll explore all things command-line – from the origins of the command-line and the evolution of the terminal, to what we’re doing to overhaul and modernize the Windows Console & command-line in future Windows releases.

devblogs.microsoft.com · Windows Command Line

6
0
0
김무훈 @iamuhun@hackers.pub
Public

오 안녕하세요, 웹 몇 개월 전에 직접 운영하고 계신 접근성 사이트맵을 접한 프런트엔드 프로그래머입니다.

개인 블로그에 올릴 웹 접근성이 UI 설계에 중요한 이유 - 웹 접근성의 의의와 의미론적인 CSS 규칙을 설계하는 방법 초안 작성을 마치고 퇴고 작업을 거치는 중입니다. 레퍼런스 검증 등 객관성이 중요한 분야이다 보니, 작업 중간에 몇몇 전문가 분의 의견을 받고 싶어 커뮤니티 가입을 신청했습니다.

그리고 글 맨 하단 섹션에 글을 기획하며 찾은 외부 자료에 대해 목록을 추렸어서 참고 문서 추가에 도움이 되지 않을까 싶습니다.

서문 W3C 홈페이지의 내비게이션 항목 중 사명(Mission) 페이지를 가보면 설계 철학 중 첫 번째가 접근성으로 “모든 사람이 웹을 사용할 수 있게 해야 한다"라고 정의되어 있습니다. 웹 표준 명세는 그런 설계 철학을 지키고자 항상 접근성을 같이 고려하여 만들어지고 있습니다. 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람의 접근은 필수적인 측면입니다. – Tim Berners-Lee, Accessibility | Our mission | W3C HTML은 마크업의 구조적 의미를 충분히 고려해서 웹 콘텐츠를 만든다면, 특별한 대응을 하지 않고 접근성을 담보되는 특징이 있습니다. Switch UI 같이 프런트엔드 프로그래머가 직접 구현이 필요해서 생기는 접근성의 한계에 대해서는1 WAI-ARIA를 통해 직접 접근성을 보조할 수 있습니다. 그리고 aria-busy, aria-current, aria-expanded, aria-pressed와 같은 WAI-ARIA 상태를 제대로 활용하면 명시적으로 UI 상태를 관리하기 용이한 개발자 경험(DX)을 갖고 있습니다. 해당 경험을 실무에서 적용한 사례 두가지를 소개하고자 합니다. 의미론적인 CSS 작성법 그간 CSS에서 픽셀을 움직이는건 꽤 빡셌지! 하지만 이제 논시멘틱(non-semantic) 한 클래스 이름과 HTML안에 쓰는 인라인 CSS, 거기다 자바스크립트 안에 작성하는 CSS 스타일을 쓰는게 진짜로 오지고 지리고 렛잇고인 방법인 것이다! 패밀리 가이 CSS GIF를 여기다 넣어라! 이렇게 ㅋ (번역) 구닥다리 공룡을 위한 오늘날의 CSS — Steemit 원본 이미지 출처 - Dinosaur Comics 의미론적인 CSS 작성법이란 HTML의 의미성과 WAI-ARIA 접근성 요소를 기반으로 하는 CSS Rules 설계 방법입니다. 이 글에서 무엇을 다룰지 영상으로 이해하고 싶으신 분은 “How to write Semantic CSS - YouTube“를 먼저 보시길 바랍니다. 클래스 선택자는 CSS 특이도(Specificity)2 중에 중간 정도의 우선순위를 갖고 있어 범용도가 높은 특징을 갖고 있습니다. 이러한 특징으로 인해 모든 CSS 규칙(Rules)을 클래스 이름으로 정의하는 것이 흔한 사용 패턴이 되었습니다. 그러나 아래 문단에 인용한 W3C CSS 명세에 따르면 클래스 이름 위주의 CSS 규칙 정의는 웹 표준 측면에서 HTML이 가진 논리적 구조와 CSS 가상 클래스(Pseudo-classes)로 참조할 수 있는 빌트인 상태인 :checked, :default, :disabled, :invalid, :required 등이 충분히 있음에도 무시하는 것은 HTML의 구조적 의미를 약화하는 좋지 않은 관행이라고 합니다. CSS는 클래스 어트리뷰트에 강력한 기능을 부여하여, 고유한 역할이 거의 없는 엘리먼트(예: HTML의 <div> 및 <span>)를 기반으로 나만의 “문서 언어"를 설계하고 “class” 어트리뷰트를 통해 스타일을 지정할 수 있습니다. 하지만 문서 언어의 구조적 요소는 일반적으로 정해진 의미가 있지만, 사용자가 임의로 정의한 클래스는 그렇지 않을 수 있습니다. 따라서 이러한 관행을 피하는 것이 좋습니다. — “Class Selectors” Selectors Level 3 | W3C *원문에서 “Authors (작성자)” 키워드를 직역해 보니 어색해서 생략하거나 “사용자"로 대치했습니다. 또한 이 문제는 WAI-ARIA 상태를 활용해서 더욱 깊어질 수 있습니다. 서문의 마지막 문단에서 언급한 aria-busy(로딩 중), aria-current(현재 위치한 탭), aria-expanded(열림 닫힘 상태), aria-pressed(버튼 눌림 상태) 어트리뷰트 등으로 UI 상태를 의미상으로 관리할 수 있기 때문입니다.참고하면 좋은 자료 접근성 기반 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 한국어 초벌 번역 모음 사이트맵입니다.
0
1
0
Hyunjin Cho @resistan@hackers.pub
Public
Shared by 김무훈

디지털 접근성에 관심 있는 분들이 계시려나...

구린 영어 실력에 LLM을 빌어서 일단은 혼자 하고 있지만...

예전처럼 평가 중심이 아닌 구현 방법 중심의 글을 좀 생산하고 싶다고...

일단 계획은 이런데... 같이 할 사람 있으면 좋겠다고 생각합니다아아...

https://a11ykr.github.io/docs/

A11Y KR 접근성 문서 모음

디지털 접근성 개선을 위해 번역, 자료 수집 활동을 하고 있습니다.

a11ykr.github.io · Docs

0
0
1
geeknews_bot @geeknews_bot@sns.lemondouble.com
Public
Shared by 김무훈

GN⁺: 오늘날 평균적인 대학생의 모습
------------------------------

- 저자는 *Gen X 세대* 로, 매우 이른 나이에 박사 학위를 취득해 *30년 넘게 교수로 재직 중* 임
- "*요즘 애들 타령* "으로 치부되는 것을 알고 있지만, "*지금 학생들은 정말 예전과 다르며, 이 변화는 주목할 만함* "
- 근무 중인 학교는 *미국의 지역 공립 대학* 으로, 이 대학의 학생들은 거의 모든 …
------------------------------
https://news.hada.io/topic?id=20049&utm_source=googlechat&utm_medium=bot&utm_campaign=1834

오늘날 평균적인 대학생의 모습 | GeekNews

저자는 Gen X 세대로, 매우 이른 나이에 박사 학위를 취득해 30년 넘게 교수로 재직 중임"요즘 애들 타령"으로 치부되는 것을 알고 있지만, "지금 학생들은 정말 예전과 다르며, 이 변화는 주목할 만함"근무 중인 학교는 미국의 지역 공립 대학으로, 이 대학의 학생들은 거의 모든 면에서 전형적인 평균치에 해당함진로 목표, 지적 수준, 사회·경제적 배경,

news.hada.io · GeekNews

0
0
1
bgl gwyng @bgl@hackers.pub
Public
Shared by 김무훈

better CSS에 대한 접근들(CSS-in-JS, Atomic CSS, Preprocessor)의 공통된 한계는 constraint solving 방식이 아니란 것이다.

다들 어떤 기존의 스타일을 '덮어쓰는' 방법, 근데 개중에 좀 잘 덮어쓰는 방법을 찾고 있다. 그런데 많은 경우, 뭔가를 덮어쓰려고 하고 있다면, 그건 사실 값을 덮어쓰는게 아니고 만족해야할 조건을 추가하고 싶은거다. 값을 덮어쓰는 것은 조건을 추가하는 방법 중 가장 강제적인 하나의 방법일 뿐이고. 즉, 디자인 시스템은 어떤 조건들의 합들로부터 실제 스타일을 구하는 방법이어야 하고, 개발자는 조건만 명시할 수 있어야 한다.

constraint solving을 잘 설계하고 구현하는게 어렵다 왜 이렇게 안 하냐고 하긴 좀 거시기하다. 그래서 나도 요즘 propagator를 공부중이다.

0
2
0
洪 民憙 (Hong Minhee) @hongminhee@hackers.pub
Public
Shared by 김무훈

소프트웨어 개발자들이 자주 틀리는 외래어 표기법.

영어 틀린 표기 올바른 표기
app 어플 앱
application 어플리케이션 애플리케이션
directory 디렉토리 디렉터리
front-end 프론트엔드 프런트엔드
message 메세지 메시지
method 메소드 메서드
release 릴리즈 릴리스
repository 레포지토리 리포지터리

또 있을까요?

0
9
0
0
4
0
김무훈 @iamuhun@hackers.pub
Public

https://www.frontend.moe/posts/naver-2025-coding-test/ 팀네이버 코딩 테스트 후기를 개인 블로그에 올려두었습니다. 꾸준히 일할 수 있는 지속 가능한 소프트웨어 엔지니어로서의 삶을 지켜내고자 반성글을 쓰게 되었습니다(...)

팀네이버 코딩 테스트 후기

네이버 신입 기술 직군의 공채채용 코딩 테스트에 응시하며 다시금 느낀 실수 패턴을 정리했습니다.

www.frontend.moe · 프엔모에

0
0
0
0
1
0
김무훈 @iamuhun@hackers.pub
Public

해커펍은 퍼머링크로 아카이빙 참조하기 최적이라 생각해서 앞으로 기술을 다루며 기록 및 참조하는 용도로 잘 사용하려고 합니다.

트위터는 나중에 다른 사람에게 보여줄 참조용으로 쓰기에는 너무 정보 대비 소음이 많은 특성 때문에 잘 맞지 않는다고 생각합니다.

0
0
0