강의 요약

1주차 마지막 날에 foundation을 점검하는 시간으로 섹션이 마무리가 되었고, 본격적으로 컴포넌트를 만들기 전 개념들을 설명해주셨다.

강의에서 진행할 컴포넌트 만드는 순서 (1~4번 ♾)

기본 싱글 컴포넌트 만들기
1. 베리언트 프로퍼티를 제외한 모든 프로퍼티 등록하기
  1. boolean, instance swap, text
인스턴스 복사 후 테스트
베리언트 프로퍼티 만들기
1. state > status > style > size의 순서로 보통 추가함
테스트

Naming Convention

우선 네이밍 컨벤션 팁을 알려주셨고, 강의에서는 주로 camelCase로 적용하였다. 다른 규칙은 어떤게 있는지 좀 더 찾아봤는데, 제일 많이 알려진 건 아래 4가지 케이스였다.

Snake case: 단어를 밑줄(_)로 구분하고 모두 소문자로 작성 (e.g., this_is_snake_case)
Kebab case: 단어를 하이픈(-)으로 구분하고 모두 소문자로 작성 (e.g., this-is-kebab-case)
Camel case: 첫 단어는 소문자, 이후 단어의 첫 글자는 대문자로 작성 (e.g., thisIsCamelCase)
Pascal case: 모든 단어의 첫 글자를 대문자로 작성 (e.g., ThisIsPascalCase)

너무도 당연한 얘기지만, 레이어명을 바로바로 바꾸시는 볼드님 보고 정말 많이 반성했다. (평소 레이어명 Frame258232으로 방치 중인 나.. 🥲)

컴포넌트 만들기

이번 주는 입력, 디스플레이, 피드백 3 가지 컴포넌트를 만들었다. 특히 컴포넌트를 만들면서 베리어블을 적용한 건 처음이라 굉장히 흥미로웠다. 아직 회사 실무에 베리어블을 적용하기 전인데, 작업할 때 자연스럽게 베리어블을 찾는 내 모습을 보며, 구조에 대해 이해가 점점 더 되고 있는걸 느꼈다.

디자인 시스템을 만든 경험이 있기 때문에 이미 잘 알고 있다고 생각했는데, 이번 주는 같은 컴포넌트를 만들면서도 얼마나 더 효율적으로 관리할 수 있는지에 대해 많은 것을 배웠다. (역시 배움에는 끝는 없다.) 특히 슬롯 컴포넌트를 활용해서 모달만드는 방법이 정말 재밌었고, 이와 같이 효율적인 관리와 확장성을 고려한 방법들이 더욱 인상 깊었다. 앞으로 실무에서도 적극 활용할 수 있을 것 같다.

유용한 플러그인

Contrast - 색상 대비를 확인하고 접근성 기준을 충족하는지 검사해주는 플러그인. 해외에서는 접근성 기준을 굉장히 중요하게 생각한다고 하셨다.

컴포넌트를 만들던 중 Placeholder 색상이 좀 진해보여서 색상을 한 단계 낮췄는데, 바로 접근성 기준 fail을 받았다. 🥲 어렵네 어려워

특강 및 온라인 세션

어제는 (12일) 온라인 세션이 진행되었고, ChatGPT를 활용해 디자인 시스템을 구축하는 방법에 대해 배웠다. 처음에는 문서 다듬기 정도로만 활용할 수 있다고 생각했는데, 디자인 워크플로우에 AI를 활용하는 방식이 굉장히 인상적이었다.

프롬프트 프레임워크

C - Context (맥락)
I - information (정보)
G - goal (목적)
O - output (결과물)

회고

잘한점
- 미션 #3 우수자로 선정 되었다.
  ✌
아쉬운점
- 또 강의를 들으며 노트를 바로바로 쓰지 못하였다... 특히 이번주는 휴일도 적고, 회사 프로젝트 때문에 시간이 부족해 미션을 완수하는데만 너무 급급했던 것 같다.
다음주 계획
- 오늘 온라인 세션에서 배운 플러그인으로 문서 정리해보기
- 강의 들으면서 만든 컴포넌트로 다양한 예시 만들어볼 것

인프런 워밍업 프로덕트 디자인 2기 2주차 발자국