블로그

김소형

[인프런 워밍업 클럽 스터디2기] 프로덕트 디자인 1주차 발자국

학습 내용베리어블의 정의와 용도베리어블의 구성과 이름짓기 방법베리어블을 등록하고 효율적인 활용을 위해 노출 범위를 설정하는 법저장한 컬러 및 단위, 폰트 스타일을 바탕으로 디자인 파운데이션을 문서화 하는법입력 컴포넌트 만들기미션공개 목표 : 베리어블 등록하고 파운데이션 문서화하기1주차 개인 목표목표 1 : 가장 간단한 방식의 베리어블 등록방식 실험해보기목표 2 : 플러그인보다 보기 편한 방식으로 문서화 시도하기워밍업 클럽 전에 여러번 볼드님이 운영하시는 스터디에 참여했었고, 앞쪽 내용은 여러번 들었다. 그동안 강의는 열심히 따라했다고 생각했지만 개발까지 베리어블을 적용해볼 수가 없어 효용성을 체감하기 어려웠다.이제 그냥 강의를 따라하는 것 보다는 나름대로 여러가지 추가적인 공부를 하면서 의의를 찾아봐야겠다고 생각했다.개인 목표 1 실습 과정 새로운 프로덕트를 만든다고 생각하고, 가장 간단한 베리어블 시스템을 만들어보자회사마다 베리어블 구조가 다 달랐는데, 다 나름대로 좋은 부분이 있었다. 다만 일부 회사의 경우 너무 체계적인게 오히려 작은 회사에서 그대로 적용하기엔 문제가 있어보였다. 논리적이긴 한데, 막상 눈에는 잘 안들어오는 느낌? 베리어블 정의가 복잡하면 직관적으로 파악하기 어려워 활용도가 떨어진다고 생각해서 구분을 최소화했다. 텍스트 아이콘 컬러값이 대체로 비슷해 머터리얼 가이드에서는 둘을 따로 구분하지 않아서 베낌 > Text로 정의마찬가지로 토글, 버튼등 인터렉션 컴포넌트도 대체로 비슷해서 구분 안하기로 했다. > Interaction으로 정의상태 컬러(Hover,Pressed등)는 컴포넌트에 한번 지정하고 나면 실제 UI작업에서는 거의 쓰이지 않기 때문에 잘 안보이는게 좋겠다는 생각이 들어서 목록 최하단에 뜰 수 있도록 분리했다.   개인 목표 2 실습 과정플러그인으로 뽑았을 때 나오는 컬러차트 말고, 좀더 명료한 방식으로 문서화 해보자예전에 디자인 스타일 가이드를 나름대로 만들어서 전달했는데, 프론트분들이 냅다 개별 화면 마크업 하는데 주력하고 잘 봐주지 않아서 시무룩했던 경험이 있다. 시간도 없거니와 눈에 잘 안들어왔던 모양이다.기껏 시스템을 만들었으면 잘 읽히게 문서화를 하는것도 중요하다고 생각해서 다른 회사 파운데이션 가이드를 참조해서 만들어봤다. 참조 : 11번가 및 라인 디자인 시스템 가이드대체로 양식이 비슷한데, 라인이 특히 컬러 사용에 대한 정의가 깔끔해서 참고가 되었다.실무에서는 정의한 가이드와 다르게 컬러를 추가하거나 이미 다르게 사용된 경우가 많을것이라 생각된다. 이런 엣지케이스에 어떻게 대응할지, 문서를 어떻게 업데이트하고 유지할지도 구성원간의 합의가 필요할 것 같았다.    

UIFIGMADesignSystem

dev_traveler

[인프런 워밍업 스터디 1기 디자인] 3주차 - 컴포넌트 만들기 2

지난 주에 이어 컴포넌트 만들기를 계속 진행했습니다. 다양한 컴포넌트들을 만들어 보니 자신감도 생기고 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 timeToast 는 주로 화면의 오른쪽 상단에서 떠오르고 짧고 간결한 메세지를 담고 있습니다. 사용자 행동에 즉각적인 피드백이나 애플리케이션이 잘 동작하고 있음을 알려주는 정보를 담습니다. 자동으로 사라지거나 사용자에 의해 없앨 수 있습니다. Alert 은 화면 상단에 눈에 띄는 메세지를 보여줍니다. 새로운 기능이나 사용자 행동을 수반하는 피드백 메세지를 담을 수 있습니다. alert은 영구적이고 모달처럼 동작하지 않기 때문에 사용자가 언제든지 무시하거나 반응할 수 있습니다. 핵심은 Alert 은 자동으로 닫히지 않고 화면 상단에 위치하지만 Toast 는 화면 가장자리에서 즉각적으로 튀어나와서 자동으로 사라질 수 있다는 것입니다. 이제 두 컴포넌트를 구분해서 사용할 수 있을 것 같습니다.  Table 컴포넌트테이블 컴포넌트는 복잡할 줄 알았는데 생각보다 쉬웠습니다. 테이블을 구성할 요소들을 나누어 part 컴포넌트로 나누고 조합하면 금방 테이블이 만들어집니다. 3주동안 과제를 진행해보며평균적으로 하루동안 봐야할 강의는 1시간 정도이고 이를 연습해보고 미션까지 수행하는 것은 저에겐 3시간은 필요한 것 같습니다. 매일 4시간씩 과제를 한다는게 정말 쉽지 않은 일인데 스스로 대견하다는 생각도 듭니다. (물론 저는 지금 이틀정도 밀려있습니다.) 밀리지 않고 진도에 맞춰서 진행하는 다른 인프러너분들 정말 존경합니다. 이제 진짜 일주일도 안남았는데 끝까지 완주해서 오마카세 먹으러 갈랍니다. (OT 때 스스로 정하신 자기 보상 기억하시죠? 저도 방금 문득 생각났습니다ㅎㅎㅎ) 그럼 모두 화이팅 🔥

UX/UIFigmaUXUIComponentDesignProduct

채널톡 아이콘