웹 접근성 레퍼런스 모음 tailwind-a11y를 만들고 관련 글을 쓰면서 모은 자료. 계속 업데이트 예정통계웹 전체의 현황🔗 https://webaim.org/projects/million/ WebAIM: The WebAIM Million - The 2026 report on the accessibility of the top 1,000,000 home pagesIntroduction For the eighth consecutive year, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites. The evaluation was conducted using the WAVE stand-alone API (wi..
프론트엔드 시스템 디자인 - 3. Agentic UI와 AI-native 프론트엔드 설계 인프런에서 프론트엔드 시스템 디자인 강의(https://inf.run/8ezQ9)를 듣고 스스로 코드를 짜보면서 알게되는 내용을 정리하고 있다. Vite + React + TypeScript로 클라이언트를 만들고 Express 서버를 붙이고, LLM에게 목표를 전달하고 계획을 받아 실행하는 정도로 생각했지만 하나씩 붙이다 보니 생각보다 프론트엔드에서 신경 써야 할 게 많았다. 계획을 세우는 동안에는 어떤 상태여야 하는지, 사용자의 승인은 상태인지 이벤트인지, 도구 하나가 실패했을 때 전체 작업을 실패로 볼 것인지, 재시도 이후에는 어떤 데이터를 기준으로 최종 결과를 다시 만들어야 하는지 같은 고려하지 못했던 부분들이 생겨서 고민할거리들이 많았던 것 같다. 채팅 UI만으로는 부족한 이유 AI를 붙인 서..
Tailwind-a11y 개발 기록 4편 (출시 2주 뒤 ! 2300+ download 라니) tailwind-a11y를 처음 만들기 시작한 지 2주 정도 됐다.처음에는 그냥 AI 가 CSS 라이브러리로 많이 채택하는 Tailwind 의 접근성 문제를 조금 더 빨리 잡아보고 싶어서 만든 스크립트같이 간단한 레포였는데,, 이것저것 붙이다 보니 지금은 CLI도 있고, ESLint 플러그인도 있고, VS Code 익스텐션도 있고, 최근엔 GitHub Action까지 마켓플레이스에 배포했다. (이건 쓰임이 많을 것 같진 않다 ㅎㅎ) 시간 날때마다 조금씩 라이브러리를 업데이트 하는게 재미지다. 그리고 npm 다운로드가 2,300을 넘었다.(!) pr 이 올라오거나 연락이 오는게 아니니 사실 나에게 와닿는 건 없지만..내가 만든 패키지를 누가 실제로 설치해서 쓰고 있다는 게 잘 안 믿기긴 한다. 업데이트..
프론트엔드 시스템 디자인 - 2. 자동완성 검색창 지난 글에서 정리한 RADIO 프레임워크 적용사례로, 주제는 자동완성 검색창이다.Input과 Dropdown만 있는 작은 UI지만, 요구사항을 제대로 짚어보면 생각보다 다룰 게 많다. 문제 정의구글 검색창을 예로 든다. 사용자가 app을 입력하면 apple, apple store, apple watch, app store, apple stock 같은 추천어가 떠야 하고, 추천어를 클릭하거나 Enter를 누르면 해당 검색어로 검색 결과 페이지로 이동한다. 면접에서도 자주 나오고, 실무에서도 흔히 구현하게 되는 케이스다.흔한 접근: Input 컴포넌트를 만들고, onChange에서 API를 호출하고, Dropdown에서 결과를 보여준다.-> 틀린 방식은 아니지만, 이렇게만 설계하면 몇 가지가 빠진다.사용자..
Tailwind-a11y 개발 기록 3편 공부 많이 된다 어제 vscode 어댑터도 추가하고, cli, eslint, vscode 가 동시 배포되는 워크플로도 세팅해서 버전 올라가는 pr 이 머지될 경우 action 이 돌아서 한번에 배포되게끔 세팅을 해두었다.이쯤에서 내가 라이브러리를 개발하면서 얻은 인사이트를 정리하고 가면 좋을 것 같아서 글을 적게 되었다. 라이브러리를 처음 만들며 찾은 다른 점들웹앱은 내가 부르는 코드를 내가 실행하는 구조라 자유롭다. 반면 라이브러리는 내가 모르는 남의 코드가, 내가 모르는 타이밍에, 내가 정해둔 규칙대로 내 코드를 불러 쓰는 구조다. 이 차이는 알고 있었지만 실제로 개발을 해보니 또 새로운 인사이트가 많았던 것 같다. 모르는게 많았던 만큼 클로드랑 토론도 많이 하고 다른 오픈소스나 ESlint, Prettier 들 구..
Tailwind-a11y 개발 기록 2편 (Babel AST로 Tailwind 접근성 분석기 만든 과정) https://kimhaeun.com/136 Tailwind-a11y 개발 기록 (라이브러리 npm 배포!)Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다kimhaeun.com1편에서는 tailwind-a11y를 만든 계기나 전반적인 내용을 적었다면 이 글은 기술적인 부분을 기록하는 것이 주가 될 예정이다. JSX를 파싱하는 부분, Tailwind 클래스를 CSS 값으로 변환하는 로직, 그리고 같은 패턴으로 두 번 발생한 미탐 버그의 원인을 코드와 함께 정리했다.분석 구조tailwind-a11y의 분석 과정은 세 단계로 나뉜다.파싱: Babel로 JSX 소스코..
Tailwind-a11y 개발 기록 (라이브러리 npm 배포!) Tailwind 접근성 검사 라이브러리를 처음 만들어 npm에 배포해봤다.프론트엔드 개발자로 일하면서 언젠가는 작은 오픈소스 라이브러리 하나쯤은 직접 만들어 보고 싶다는 생각을 계속 하고 있었다.처음에는 Tailwind 관련 라이브러리를 만들어볼까 생각했다. 하지만 이미 Tailwind 생태계는 너무 성숙했고, 비슷한 라이브러리를 하나 더 만드는 건 큰 의미가 없다고 느꼈다.그래서 새로운 걸 만들기보다, 기존 도구들이 잘 해결하지 못하는 문제를 찾아서 해결해보는 방향으로 바꾸었다. 그렇게 시작해서 이번에 처음으로 두 개의 npm 패키지를 배포했다.tailwind-a11y : Tailwind CSS 프로젝트에서 접근성(WCAG)을 빌드 타임에 검사하는 CLIeslint-plugin-tailwind-a11y..
프론트엔드 시스템 디자인 - 1. RADIO 접근법 프론트엔드를 개발하며 대규모 트래픽에서 안정적으로 동작하게 설계하는 방법 같은 질문 앞에서는 어디서부터 생각을 시작해야 할지 명확한 정리가 필요하다고 느껴왔다. 말로 설명하려면 머릿속에 완벽한 다이어그램이 그려져야하는 사람이라 한번 각잡고 정리해봐야겠다 싶었다. 그치만 백엔드 시스템 디자인 자료는 많은데, 프론트엔드 관점의 시스템 디자인을 체계적으로 다루는 자료는 의외로 찾기 어려웠다. 여기저기 뒤지다가 인프런에서 [미국 빅테크 프론트엔드 시스템 디자인 실전: 단순 구현자로 남지 않기 위한 프론트엔드 개발자를 위해] (링크: https://inf.run/8ezQ9 ) 라는 강의를 발견했다. 한번 들어볼까 싶었다가.. 이 글은 그 강의의 앞부분, AI 시대 프론트엔드 엔지니어의 역할과 RADIO 접근법..
AWS SAA-C03 후기 / 덤프 한국어 1-200번 문제 & 정리본 공유 응시 이유요즈음 공부할 시간이 많이 나서, 짧게 집중적으로 공부해서 바로 활용할 수 있는 자격증을 찾아봤다.그중 후보로 정처기와 SAA 가 있었는데, 정처기는 결과가 12월에 나오기도 하고 시험이 아직 멀어서 당장 볼 수 있는 시험인 SAA로 결정했다.최근 인턴 하면서 인프라 쪽도 간접적으로 알아야할 것들이 있어서, 시간나면 꼭 네트워크와 클라우드 공부를 해봐야겠다 싶었는데, AWS 라는 점유율이 높은 서비스로 공부할 수 있어 좋은 기회라고 생각했다. (인프라도 잘하는 개발자가 되고 싶은 소망으로,,) 필자의 백그라운드는 컴공 전공 / 기본 네트워크 지식 있음 / AWS 사전 지식 거의 없음 S3 써본 정도바로 4일?5일 뒤인 날짜로 오프라인 시험을 예약했고, 아무래도 시간이 부족한 것 같아서 토요일로 ..

티스토리툴바