​

안녕하세요, UXPin 한국 총판 단군소프트입니다.

2021년 11월 4일 목요일, GitHub X UXPin 웨비나에서 디자인 툴 UXPin에 대한 소개와 Merge를 통한 GitHub 연동 등 다양한 방법에 대해 코드 베이스 UI/UX를 안내해드렸습니다.

다시 한번 웨비나에 관심 가져 주시고 참석해주신 모든 분께 감사의 마음을 전합니다.

웨비나가 끝나고 많은 분들의 요청으로 당일에 참석을 못 하신 분들 또는 글이 더 편하신 분들을 위해 지난 웨비나 내용을 글로 요약해서 가져와 보았습니다. 구독자들에게 많은 도움이 되는 정보가 되길 바랍니다. :)

유용한 정보가 너무 많아서 요약을 했는데도 2편으로 제작 될 예정입니다!

1편 지금 바로 시작해볼까요?

본격적으로 시작하기 전, 이번 웨비나에서는 어떤 내용들을 다뤘는지 알아볼까요?

1. UXPin 소개

● UXPin의 다양한 활동

● 어떤 툴일가?

● 왜 필요로 한가?

2. UXPin Merge Training

● 왜 기업들이 디자인과 개발 프로세스를 연결해야 하는가?

● 어떻게 하면 디자인과 개발이 연결될 수 있을까?

● UXPin Merge가 무엇이며, 어떻게 사용하는 것인가?

3. UXPin 장점 및 Design System Demo

UXPin 소개

UXPin의 다양한 활동

UXPin은 단순히 툴뿐만 아니라 다양한 활동을 하고 있어요.

1. 웨비나: UX 분야에서 큰 영향력을 가지고 있어요. 매번 수백 명의 규모로 글로벌한 웨비나를 연다고 합니다.

2. E-book: 최근 디자인 books를 준비하고 있고, UX 디자이너가 참고할 수 있는 유용한 정보도 많이 담겨 있어요

3. 블로그

4. Product Tribes: 전 세계 1만 7천 명의 가입자를 보유하고 있는 커뮤니티를 운영 중이라고 합니다.

UXPin은 어떤 툴일까?

● 인터렉션을 넣을 수 있어 실제 프로덕트와 가장 가까운 디자인을 할 수 있어요!

● 코드 기반의 툴이에요! 디자인만 해도 뒤에서는 코드로 돌아가기 때문에 개발자에게 보다 정확한 css 코드나 js코드로 전달 가능합니다. 덕분에 손대지 않고 엔지니어에게 전달하여 빠르게 개발 작업을 할 수 있어요.

● API 연계가 가능해요! 실제 하드웨어와 연계해서 Test를 할 수 있습니다.

이렇게 보니 정말 진정한 유저 경험을 해볼 수 있는 툴인 것 같은데요?

왜 필요로 한가?

기업이 성장할수록 한 명의 디자이너가 더 많은 엔지니어와 이해관계자와 소통해야 하는 것은 사실입니다. 이를 해결하기 위해서는 디자인 시스템이 필요하죠.

UXPin은 이러한 문제를 해결하기 위해 디자이너와 엔지니어가 디자인시스템을 중심으로 디자인 경영을 실현하는데 초점을 맞추고 있다고 합니다.

디자인시스템 성숙도의 4단계

수많은 디자인 툴은 대부분 3단계라고 하는데요, 앞서 앞에서 UXPin의 기능과 소개한 것처럼 종합적으로 보았을 때 UXPin은 성숙도 4단계인 Full-stack UX 디자인시스템에 속하는 것 같죠?

UXPin Merge Training

왜 기업들이 디자인과 개발 프로세스를 연결해야 하는 가? ​

속도, 품질, 일관성

기업이 디자이너에게 원하는 것은 속도, 품질, 일관성이라고 합니다.

요즘은 속도와 품질은 많이 갖춰진 추세이기 때문에 더욱 중요하게 강조되는 것은 바로 일관성인데요,

일관성이 유지되면 유지보수 비용 절감, 일관된 컴포넌트의 사용으로 유저 신뢰 향상 등을 얻을 수 있죠.

우리가 원하는 건 이미 코드에 다 갖춰져 있습니다. 좋은 It 기업들의 코드를 보면 모듈화가 잘 되어있고, 재활용이 가능한 형태로 개발이 되어있죠. 그런 구성들은 디자인시스템을 구현하는데 좋은 기반이 될 수 있습니다.

어떻게 하면 디자인과 개발이 연결될 수 있을까?

먼저, 문제가 무엇인지 파악하고, 해결해야 하겠죠

툴의 문제점 3가지

먼저, 우리가 사용하는 툴은 아래 문제점 3가지에 포함이 되는지 확인해봅시다.

1. 디자인과 결과물이 다른 경우 다반사

: 디자인 툴이 개발과는 거리가 멀다.

2. 컴포넌트/심볼의 상호작용하지 않는 단순한 디자인

: Input이 있을 때 수많은 와이어프레임을 만들지 않는 이상 화면의 반응까지 보여주기는 어렵다.

3. 디자인에 수정, 업데이트가 필요할 때 동기화가 바로 되지 않는 점

3개 중 몇 개가 포함되시나요?

위와 같은 3가지 문제점들이 디자이너와 개발자의 협력을 방해하고, 충돌을 일으킬 수 있습니다.

이미지 기반 디자인&코드기반 디자인

현존하는 디자인 패러다임은 두 가지로 나누어집니다.

아래와 같은 이미지처럼 말이죠.

그럼 이제 답을 찾을 수 있겠네요!

● 진정한 디자인과 개발의 연결

● 현대 디자이너에게 기대되는 품질과 속도를 제공

​ 바로 ‘코드기반 디자인 툴’​.

그것이 유일한 솔루션이 아닐까요?

여기까지 11월 4일에 진행한 UXPin 웨비나 요약_1편이었습니다.

어떠셨나요, 유용한 정보였나요?

이번 웨비나를 통해 UXPin이 얼마나 워크플로우를 단축하고, 유용한지 알게된 것 같습니다.

UXPin이 궁금하시다면 아래 링크를 눌러보세요!

UXPin 무료로 시작하기

다음시간에는 Code-based Design, UXPin 웨비나 요약_2편으로 찾아뵙겠습니다.

많은 기대와 관심 부탁드립니다.

웨비나 등록, 플랫폼, 운영 방식, 향후 다루었으면 하는 주제 등에 관하여 의견이 있으신 분들은 언제든지 아래에 댓글을 남겨주세요.