레오의 프론트엔드 개발

웹 접근성: 모두를 위한 웹 개발의 중요성

art1st — Wed, 7 Jun 2023 13:23:55 +0900

W3C WAI-ARIA

안녕하세요! 오늘은 웹 접근성에 대해 이야기해보려고 합니다. 웹 접근성은 모두를 위한 웹 개발의 중요한 요소입니다. 웹 개발자로서 우리는 가능한 한 많은 사람들에게 웹 사이트와 애플리케이션을 이용할 수 있는 기회를 제공해야 합니다.

그렇다면 웹 접근성이 정확히 무엇을 의미하는지 알아보겠습니다. 웹 접근성은 장애를 가진 사람들을 포함하여 모든 사용자가 웹 콘텐츠에 접근하고 이해하며 상호 작용할 수 있는 능력을 의미합니다. 시각적, 청각적, 지적, 물리적 장애, 고령화 등 다양한 사용자 그룹을 고려해야 합니다.

웹 접근성을 개선하는 가장 중요한 단계 중 하나는 웹 표준을 준수하는 것입니다. 웹 표준은 웹 사이트를 구축하는 데 사용되는 기술과 규칙의 집합입니다. HTML, CSS, JavaScript 등과 같은 웹 표준을 준수하면 웹 콘텐츠가 여러 플랫폼과 장치에서 일관되게 작동하고 장애를 가진 사용자가 더 쉽게 접근할 수 있습니다.

웹 접근성을 향상시키기 위해 몇 가지 고려해야 할 사항이 있습니다. 첫째로, 명료하고 구조적인 콘텐츠를 제공해야 합니다. 웹 페이지의 구조를 올바르게 마크업하여 스크린 리더 등 보조 기술이 정보를 이해하고 제공할 수 있도록 해야 합니다.

둘째로, 대체 텍스트를 제공해야 합니다. 이미지, 오디오, 비디오 등의 미디어 요소에는 대체 텍스트를 제공하여 시각적으로 이해할 수 없는 사용자에게 정보를 전달해야 합니다.

셋째로, 키보드 접근성을 고려해야 합니다. 모든 기능과 상호 작용이 키보드로 수행될 수 있도록 설계되어야 합니다. 마우스를 사용할 수 없는 사람들에게 편의성을 제공하는 것입니다.

마지막으로, 컬러 대비도 중요한 요소입니다. 적절한 색상 대비를 사용하여 콘텐츠의 가시성을 개선해야 합니다. 시각적 장애를 가진 사람들은 색상 대비를 통해 정보를 이해할 수 있습니다.

웹 접근성은 윤리적인 책임이자 법적인 요구사항입니다. 장애를 가진 사람들도 모든 기능과 서비스에 접근할 권리가 있습니다. 웹 접근성을 개선하는 것은 더 나은 사용자 경험을 제공하고 더 많은 사람들을 포용하는 웹을 만드는 것을 의미합니다.

이 글을 통해 웹 접근성에 대한 중요성과 개선 방법을 알려드렸습니다. 개발자로서 우리는 웹 접근성을 고려하여 사용자들에게 포괄적인 경험을 제공하는데 주력해야 합니다. 누구나 웹을 자유롭게 이용할 수 있는 세상을 만들기 위해 함께 노력합시다. 감사합니다!

[TIL] React 렌더링 동작에 대한 (거의) 완벽한 가이드

art1st — Wed, 16 Nov 2022 23:32:01 +0900

어제 React의 렌더링 관련 깊은 동작방식에 대해 그동안 봤던 포스팅중에 가장 자세한 내용의 번역본을 읽게 되어 꼼꼼히 읽어보았다.

어느정도 React의 동작 방식을 알고 있었지만 이번 글을 보면서 실무에서 겪었던 경우들을 떠올리며 "아하" 하는 부분들이 있었고 한층 더 React 컴포넌트 설계 및 렌더링 최적화에 대해 이해할 수 있었다.

이번 글에서 가장 눈여겨 보았던 부분은 Memoization 과 관련해 Props 참조 최적화 단락이었는데, React의 관점에서 참조가 변경되는 것을 감지하는 방식과 최적화를 위해 Memoization을 사용하는 최선의 방식과, 당연하다고 생각했던 것과 반대되는 관점들을 소개한 부분이 인상 깊었다. 내가 깊게 생각해본 적이 없었던 부분이라 흥미로웠고 결과적으로 실무 프로젝트의 코드베이스에서도 최적화할 수 있는 부분을 인지하고 찾아낼 수 있게 된 것 같다.

그리고 프론트엔드와 관련된 좋은 해외 아티클을 찾아 번역하는 Korean FE Article 이라는 곳의 메일링 리스트 구독을 했다..!

항상 생각하는 것은, 한번 읽는 것보다는 두번, 세번 읽고, 그보다 좋은 것은 실제 코드로 구현하고 경험해보는 것이라고 생각하기 때문에 항상 과거에 겪었던 상황들과 대비해보고, 의문이 드는 코드는 직접 작성하고 확인해보도록 해야겠다.

번역본

https://velog.io/@superlipbalm/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior

(번역) 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드

리액트 렌더링의 동작 방식과 컨텍스트 및 React-Redux 사용이 렌더링에 미치는 영향에 대한 세부 사항

velog.io

번역본을 작성해주신 Chanhee Kim 님에게 감사드립니다!

원문

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#rendering-process-overview

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior

Details on how React rendering behaves, and how use of Context and React-Redux affect rendering

blog.isquaredsoftware.com

2022-11-01 개발 로그

art1st — Tue, 1 Nov 2022 23:44:41 +0900

art1st.me 프로젝트

개인 웹사이트 기본 구성

AdSense 인증을 위해 DNS 루트 레코드 블로그로 이동
로그인 및 사용자 관리를 위해 AWS Cognito User Pool 생성
- AWS SES DKIM 인증 및 설정
- 인증 Provider 설정 (Google via GCP)
api.art1st.me Nest.js 구성
- M2344 버스 추적 세팅

잘 알려진 URI(well-known URI) 사용해서 더 편리한 웹사이트 만들기

art1st — Wed, 21 Sep 2022 22:58:58 +0900

최근 해킹 관련된 이슈들이 많이 부각되면서 저도 대부분의 웹사이트를 모바일 OS나 브라우저 자체적으로 임의 비밀번호를 생성해주고 자동으로 키체인에 저장하는 방식으로 바꾸기로 했습니다.

바꾸는 와중에 iOS와 Chrome 브라우저에서 공통적으로 저장된 사이트에 대해 비밀번호를 변경하는 버튼을 표시해주는 걸 발견했는데요

iOS 설정 -> 암호에 저장된 웹사이트

Chrome 설정 > 자동완성 > 비밀번호 관리자에 저장된 웹사이트

웹개발자 입장에서 저는 이런 생각이 들었습니다.

웹사이트마다 비밀번호 변경 페이지 주소와 방식이 제각기 다를 텐데 어떻게 저 버튼을 표시하지?

라는 생각이 드는채로 일단 눌러봤습니다.

그랬더니 그냥 웹사이트 메인 화면만 뜨고 비밀번호 변경과 관련된 내용은 전혀 나타나지 않습니다.

혹시나 해서 다른 도메인의 웹사이트들도 시도해봤는데 똑같고 심지어 404 페이지도 나타납니다.

그러다 어떤 사이트에서 실제로 비밀번호 변경 페이지가 나타났습니다!

바로 twitter.com 이었습니다.

이때부터 탐구심이 발동하기 시작했습니다.

왜 어떤 사이트는 되고 어떤 사이트는 안될까 하는 호기심에 동작원리를 찾아보았는데요, 생각보다 단순했습니다.

해당 버튼을 누르면 처음 연결되는 웹사이트 주소가 이렇게 생겼습니다.

https://twitter.com/.well-known/change-password

이후에는 아래 주소로 이동합니다

https://twitter.com/settings/password

/.well-known/change-password 로 접속하면 웹서버가 그 웹사이트의 비밀번호 변경 페이지 주소로 301 Redirect 하는 원리였던 것이죠.

그렇다면 이번엔 /.well-known/change-password 가 뭔지 찾아봐야겠죠.

change-password 는 대충 알겠는데 .well-known 은 생소한 키워드였습니다.

이 키워드가 바로 이 포스팅의 주제가 되는 Well-Known Uniform Resource Identifiers 입니다.

RFC 8615 - Well-Known Uniform Resource Identifiers (URIs)

datatracker.ietf.org

RFC 8615

이 RFC를 요약하면

1. 대부분의 웹 어플리케이션에서 공통적으로 존재하고 자주 쓰이는 정보들이 있지만 위치가 제각각이라 접근하기가 어려워..
2. 그럼 그걸 표준화해서 리소스 이름을 정하고 쉽게 접근할 수 있게 하자!
3. 아무나 추가하면 남용 위험성이 있으니 전문가가 심사해서 추가하자.

정도로 볼 수 있을 것 같습니다.

현재 사용되는 리소스 목록은 아래 웹사이트에서 확인할 수 있습니다.

https://www.iana.org/assignments/well-known-uris/well-known-uris.xhtml

Well-Known URIs

posh IETF [RFC7711] permanent The suffix "posh" is expected to be followed by an additional path component consisting of a service name (say, "spice") and a file extension of ".json", resulting in a full path of, for instance, "/.well-known/posh/spice.json

www.iana.org

처음 제출된 것은 2010년도로, 초안에 포함된 리소스들을 살펴보면 프로토콜과 관련해서 메타데이터 정보를 포함하는 것들이 대부분입니다.

애초 용도는 이러한 개별 프로토콜, 웹 어플리케이션에서 필요한 메타데이터들을 쉽게 접근하기 위한 것이었던 거죠.

폐기된 RFC

하지만 최근에는 OS 제조사, 브라우저 벤더사, 즉 빅테크 기업들이 이 표준을 활용해 일반적인 웹사이트 기능에도 이 표준을 활용하는 듯합니다.

그 결과가 OS, 브라우저가 공통적으로 비밀번호 변경 버튼을 제공하는 것이구요.

간단하게 확인한 well-known URI를 통해 비밀번호 변경이 가능한 사이트들은 아래 사이트들입니다.

Google (https://accounts.google.com/.well-known/change-password)
Twitter (https://twitter.com/.well-known/change-password)
Facebook (https://facebook.com/.well-known/change-password)
GitHub (https://github.com/.well-known/change-password)
Netflix (https://netflix.com/.well-known/change-password)

보시다시피 외국 웹사이트들만 지원하고 있는 실정이고 국내 웹사이트는 대형 포털 포함 어느 한 곳도 지원되는 곳을 찾지 못했습니다.

가까운 미래에는 일반 사용자를 위해 비밀번호 변경을 넘어서 더 다양한 리소스가 제안되고 사용될 것 같습니다.

만약 자기가 개발 중인 웹사이트에 회원가입과 비밀번호 변경 기능이 있다면 적용해보는 건 어떨까요?