지난 주에 이어 컴포넌트 만들기를 계속 진행했습니다. 다양한 컴포넌트들을 만들어 보니 자신감도 생기고 Figma 툴도 점점 능숙해져 갑니다. 과제가 다 끝나고 빨리 사이드 프로젝트를 시작해보고 싶습니다.

Card 컴포넌트

컨텐트를 표현하기 좋은 Card 컴포넌트 입니다. 단순한 형태로 만들어서 현재는 이미지, 제목, 부제목, 설명, 버튼만 넣고 뺄 수 있습니다. 그러나 좀 더 확장성 좋은 구조로 개선할 수 있어 보입니다. 나중에 연습해볼 Modal 컴포넌트에서 Slot 을 활용해 확장성이 좋은 컴포넌트를 만들었는데 참고하면 좋을 것 같습니다.

Modal 컴포넌트

Slot 을 활용해서 해당 Slot 에 다른 컴포넌트를 넣을 수 있도록 확장성 있게 설계했습니다.

이 모달 컴포넌트를 사용해서 다양한 모달을 구현했습니다.

그러나 확장성을 위해서 너무 자유도 높은 컴포넌트를 설계하면 사용할 때 오히려 불편합니다. 그래서 변하는 부분과 변하지 않는 부분을 구분하는게 중요합니다. 이 Modal 컴포넌트는 인스턴스를 만드는데 바로 사용되기 보다 다양한 모달 컴포넌트를 만들기 위한 재료로 사용되면 좋을 것 같습니다.

Toast와 Alert 컴포넌트

Toast 와 Alert 은 쓰임새가 비슷해서 좀 헷갈립니다. uiguideline.com 에서 제공하는 정의를 통해 구분지어 봅시다.

Toasts are shown as a floating box typically in the top right of the page. They can optionally be displayed on other edges of the screen (top-left, top-center, bottom-left, bottom-center, or bottom-right). Toasts provide limited space for content, and therefore the content must be short and concise, providing immediate feedback in response to a user action or informing users of a process that the app has performed or will perform. Disappear automatically or can be dismissed by the user.

Generally, an alert displays a prominent message at the top of the screen. It could be used to promote a new feature or provide action-based feedback messages. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time

Toast 는 주로 화면의 오른쪽 상단에서 떠오르고 짧고 간결한 메세지를 담고 있습니다. 사용자 행동에 즉각적인 피드백이나 애플리케이션이 잘 동작하고 있음을 알려주는 정보를 담습니다. 자동으로 사라지거나 사용자에 의해 없앨 수 있습니다.

Alert 은 화면 상단에 눈에 띄는 메세지를 보여줍니다. 새로운 기능이나 사용자 행동을 수반하는 피드백 메세지를 담을 수 있습니다. alert은 영구적이고 모달처럼 동작하지 않기 때문에 사용자가 언제든지 무시하거나 반응할 수 있습니다.

핵심은 Alert 은 자동으로 닫히지 않고 화면 상단에 위치하지만 Toast 는 화면 가장자리에서 즉각적으로 튀어나와서 자동으로 사라질 수 있다는 것입니다. 이제 두 컴포넌트를 구분해서 사용할 수 있을 것 같습니다.

Table 컴포넌트

테이블 컴포넌트는 복잡할 줄 알았는데 생각보다 쉬웠습니다. 테이블을 구성할 요소들을 나누어 part 컴포넌트로 나누고 조합하면 금방 테이블이 만들어집니다.

3주동안 과제를 진행해보며

평균적으로 하루동안 봐야할 강의는 1시간 정도이고 이를 연습해보고 미션까지 수행하는 것은 저에겐 3시간은 필요한 것 같습니다. 매일 4시간씩 과제를 한다는게 정말 쉽지 않은 일인데 스스로 대견하다는 생각도 듭니다. (물론 저는 지금 이틀정도 밀려있습니다.) 밀리지 않고 진도에 맞춰서 진행하는 다른 인프러너분들 정말 존경합니다. 이제 진짜 일주일도 안남았는데 끝까지 완주해서 오마카세 먹으러 갈랍니다. (OT 때 스스로 정하신 자기 보상 기억하시죠? 저도 방금 문득 생각났습니다ㅎㅎㅎ)

그럼 모두 화이팅 🔥