1. Today's Tasks
- KAN-240 - FE 랜딩 후보자를 위한 페이지 / 인재풀 등록 완료
- 송별회식 - 갈매기살 🤤
2. Learnings and Questions
스크린 리더? aria-label? aria-hidden?
스크린 리더
화면에 담긴 정보를 이해하기 힘든 사용자들을 위해 화면의 텍스트를 TTS로 읽어주는 소프트웨어
aria-label
화면에 특정 요소를 설명할 텍스트가 없을 때 aria-label에 설명을 적어준다.
<button aria-label='menu'>
... // 햄버거 이미지
</button>+) aria-labelledby
화면에 특정 컴포넌트를 설명할 요소가 있을 때 텍스트와 요소를 grouping한다.
<span id='drink-radio-label'>Drink Options</span>
<div role='radiogroup' aria-labelledby='drink-radio-label'>
...
</div>aria-hidden
의미 없는 시각적 요소인 경우 aria-hidden="true"를 이용하여 스크린리더가 읽지 않도록 한다. (default: false)
+) aria-role
태그의 역할을 알려주는 속성.
- 시멘틱한 태그를 사용했을 때는 사용할 필요없다.
<button role='button'>버튼입니다</button> // (x) - Using ARIA: Roles, states, and properties | mdn web docs에 나와있는 정해진 값을 사용해야 한다!
Atomic Design Pattern
컴포넌트와 디자인 시스템
부품들을 잘 정리해놓으면 블록들을 이용해 여러가지 결과물을 만들어낼 때 새로운 결과물에 기존 제품과 비슷한 톤앤매너를 부여할 수 있다.
이처럼 디자인에서 재사용이 가능한 디자인 부품을 먼저 만들어서 이를 조립하는 방법을 디자인 시스템이라고 부른다.
잘 정리하는 방법
블록을 어떻게 잘 정리할 수 있을까? 색깔, 크기, 기능, 용도.. 어떤 순서로 정리할까?
분리하는 기준은 여러개지만 폴더 구조는 하나이기에 개념과 폴더구조가 잘 일치하지 않다. 그래서 좋은 폴더 구조를 만드는 것은 어렵다.
Atomic Design
재사용이 가능한 컴포넌트를 만들어 조립하는 방식으로 디자인한다.
(Abstract)
→ Atoms 원자 : 더 이상 쪼갤 수 없는 디자인의 최소 단위
→ Molecules 분자 : Atoms를 모아서 만들어진다. 최소 한가지 기능을 수행한다.
→ Organisms 유기체 : Molecules, Atoms로 구성됨. 사용자에게 의미와 역할이 존재하는 단위
→ Templates 템플릿 : 아직 데이터는 연결되어 있지 않은 최종 레이아웃을 형태, 여러개의 Organisms로 구성
→ Pages 페이지 : Template에 실제 Data가 결합이 되어 사용자에게 전달이 되는 최종 디자인의 형태
(Concrete)
화학에서 가져온 개념인데, 절대로 쪼개지지 않는 단위인 원자가 있고. 원자끼리 결합했을 때 분자가 되어 특정 행동을 할 수 있게 되고, 이 분자들이 결합한 형태의 유기체가 모여서 의미있는 하나의 단위가 된다.
도입
/components
ㄴ /atoms
ㄴ /molecules
ㄴ /organisms
ㄴ /templates
/pages장점
- 계층별로 순서대로 예쁘게 정렬되는 폴더 이름과 구조
- 계층을 의식하고 적절히 나누려고 하는 시도와 선명한 목적
- atom 컴포넌트 재사용성, 독립성 증가
단점
- 계층 간에 모호한 부분이 생김 (ex. molecules vs. organisms)
다들 컴포넌트를 구분하는데 어려움을 겪고 있군... 나만 그런게 아니었어 🥹
참고 자료
Atomic Design Pattern의 Best Practice 여정기 | 테오의 프론트엔드 | 요즘IT
CodeRabbit 🐇
AI인데 PR 요약과 코드 리뷰를 해준다. 나중에 적용해봐야겠다..! 신기
똑똑한 토끼녀석..
카와이...
3. Plan for Tomorrow
- 서치라이트 빠이빠이 🖐️
- 블로그 포매터?!
