신입 디자이너가 꼭 알아야하는 '핵심 UI 컴포넌트'
커리어를 시작한 UX/UI 디자이너라면 꼭 보세요!
이거... 혹시 뭐라고 부르나요?
신입 UX/UI 디자이너들이 겪는 어려움은 무엇일까요?
많은 신입 디자이너들은 새로운 용어와 개념에 익숙하지 않아 어려움을 겪고 있습니다. 처음 디자인을 접할 때는 어디서부터 시작해야 할지 몰라 막막해하는 경우가 많죠.
이와 관련하여 UX/UI 디자인 커뮤니티에서는 컴포넌트의 이름과 용도를 묻는 질문들이 심심치 않게 올라오곤 합니다.
이런 신입 디자이너들의 고충을 덜어주기 위해 듀오톤 디자이너들이 힘을 모아 만든 소중한 자료가 있습니다. 바로 오픈패스에서 제작한 언제든지 펼쳐보는 'UI 컴포넌트 오픈북'입니다.
디자이너 필수 자료로 알려진 'UI 컴포넌트 오픈북' (@OPENPATH)누적 1억이 넘는 펀딩을 받으며 디자이너들에게 뜨거운 사랑을 받은 오픈북이, 온라인 VOD 강의로 재탄생했습니다.
듀오톤의 디자이너들이 선정한 필수 UI 컴포넌트를 직접 따라 만들어 보며 컴포넌트 제작 팁을 배울 수 있는 강의입니다.
이번 글에서는 해당 강의를 제작한 오픈패스의 최은주 PM님과 함께 강의 기획의도부터 신입 디자이너를 위한 조언까지 나눠볼 예정입니다.
Q. 컴포넌트를 정리한 오픈북이 탄생하게 된 계기는 무엇인가요?
최은주 : 디자이너 단톡방에 자주 올라오는 질문이 있어요. '이 컴포넌트 이름이 뭔가요? 뭐라고 부르나요?' 처음 UX/UI 디자인 공부를 시작하시는 분들이 어려워하는 부분이죠. 많은 걸 묻고 싶지만 무엇을 어떻게 물어볼지 몰라서 답답한 분들도 많을 거라고 생각했어요. 그래서 신입 디자이너들이 꼭 알아야 할 핵심 UI 컴포넌트 16개를 선정하게 되었어요.
[오픈패스에서 선정한 16가지 필수 UI 컴포넌트]
1. 앱 바(App bar)
2. 배너(Banner)
3. 바텀 내비게이션(Bottom navigation)
4. 버튼(Button)
5. 카드(Card)
6. 칩스(Chips)
7. 다이얼로그(Dialog)
8. FAB(Floating Action Button)
9. 리스트(List)
10. 메뉴(Menu)
11. 내비게이션 드로어(Navigation Drawer)
12. 셀렉션 컨트롤(Selection Control)
13. 슬라이더(Slider)
14. 스낵바(Snack bar)
15. 탭(Tab)
16. 텍스트 필드(Text Field)
Q. 이 컴포넌트들을 선정하는 과정에서 어떤 기준을 사용하셨나요?
최은주 : 듀오톤 디자이너들이 머터리얼 가이드 2.0을 기반으로 굉장히 치열하게 고민했어요. 안드로이드, iOS, 웹, 앱 등 모든 플랫폼에서 꼭 필요한 컴포넌트들을 선정했죠. 이렇게 선정한 컴포넌트들의 용도와 실무 팁까지 함께 담아내려 노력했습니다.
듀오톤 디자이너들이 핵심 UI 컴포넌트 선정을 논의하는 모습(@Duotone)Q. 책이 굉장히 뜨거운 반응을 얻었는데요, 영상 강의로 만드신 이유는 무엇인가요?
최은주 : 책에 다 담지 못한 실제 활용 사례와 제작 방법을 좀 더 생생하게 전달하고 싶어서 VOD(영상 강의)도 제작하게 되었어요. VOD를 통해 직접 설명을 들으면 더 익숙하고 확실하게 이해할 수 있을 거라고 생각했죠. 눈으로 보는 것과, 직접 만들어보는 것은 큰 차이가 있다고 생각해요. 이번 강의를 통해 쉽게 나만의 컴포넌트를 만들어 볼 수 있도록 하고 싶었어요.
Q. VOD는 어떻게 구성되어 있나요?
최은주 : 일단 VOD를 구매하시면 오픈북을 받으실 수 있어요. 오픈북은 상시 판매를 하지 않아 구하기 어려운 제품인데, 이번 기회를 통해 오픈북을 득템 하실 수 있습니다(선착순으로 증정하고 있어요!!!!!)
내용에 대해서 말씀드리면 컴포넌트 이름, 사용 방법, 상태값, 스펙, 제작 가이드까지 담겨있어요. 기본적으로 오픈북의 내용을 포함하지만, 보다 풍부하고 심도 있는 정보가 담겨 있습니다. 구글 머터리얼 가이드 Principle, 컴포넌트 활용사례, 현직자의 Tip 등 UI 디자인의 기초를 더 탄탄히 다질 수 있도록 구성되어 있어요.
Q: 이 강의를 접하게 될 신입 디자이너들에게 전하고 싶은 말씀이 있으신가요?
최은주 : 처음 UX/UI 디자인을 시작할 때는 모르는 것도 많고, 질문하기도 두려울 수 있어요. 하지만 오픈패스가 제작한 오픈북과 VOD를 통해 조금 더 쉽게 시작할 수 있기를 바랍니다.
언제든지 궁금한 점이 있으면 주저하지 말고 오픈패스에 질문해 주세요.
오픈패스는 디자이너 여러분의 성장을 항상 응원합니다!
3,600명의 디자이너가 선택한 UI 컴포넌트 오픈북이 강의로 탄생했습니다.
강의 평생 소장, UI 컴포넌트 오픈북 증정, 피그마 UI 라이브러리 제공까지!
신입 디자이너를 위한 역대급 혜택이 담긴 UI 컴포넌트 강의를 만나보세요.
