🔖 2021년 8월 4주 TOP3

🔖 2021년 8월 4주 TOP3

MVP 디자인 시스템 만들기

디자인 시스템은 디자인 업계에서 다재다능한 주제입니다. 그렇다고 해서, 이미 통찰력 있는 대화에 새로운 통찰력을 추가하려는 시도는 하지 않겠습니다.(죄송해요. 그래야만 했네요.)

특히 브랜딩이 시장에서 스타트업의 주요 장점인 경우, MVP 디자인 시스템이 어떻게 프로덕트 시장에서 적합할 수 있도록 지원하는지, 저만의 경험을 공유할 것입니다.

Flipd에서 일을 시작했을 때, 저는 잘 구상된 브랜드 콘셉트들과 산더미 같은 디자인 부채 사항들을 짊어지게 되었습니다.

(다양한 계약직 디자이너들이 iOS 앱에 잘 구상된 브랜드를 적용하기 위해 거쳐갔던 역사로부터 말이죠.)

일관되지도 않고, 일관성도 없는 패턴, 브랜딩, 인터렉션, 에셋, 구성요소, 레이아웃 등이 있습니다. 그밖에 뭐든지 저는, 많은 것들을 물려받았습니다.

이러한 부채 요소들은 프로젝트의 인터페이스 디자인 단계에서 사소한 결정도 복잡하게 만들고 시간을 잡아먹게 됩니다. 디자인 시스템, 표준 및 아이덴티티에 대한 공통적인 이해가 없다면 인터페이스를 구축하고 다듬어야 할 때, 개별 선호도를 관리하고 달래느라 시간을 낭비하게 될 것입니다.

디자인 표준과의 일관성을 기반으로 디자인을 평가하기보다는 서로 다른 의견을 가진 팀원들 사이에서 왔다 갔다 하는 저희의 모습을 보게 되었거든요.

표준과 일관성을 지지하는 것은 표준과 일관성을 정의하는 방법이 없으면 의미가 없거나 효과적이지 않습니다. 어떻게 그것이 사용자를 이해시킬 수 있는지 말이죠.

뭔가 달라져야 했습니다. 저는 저희의 주요 iOS 프로덕트에 대한 브랜드 및 디자인 시스템의 구축을 지지하기 시작했습니다.

이해관계자들에게 MVP 디자인 시스템에 투자하도록 설득하는 것은 시간과 인내가 필요했습니다.

디자인 시스템이 있으면 쉽게 해결할 수 있는 결정에 대해서 제가 얼마나 많은 시간을 낭비하고 있는지 지적하기 위해 공동 노력을 시작했거든요. 또한 디자인 부채 요소를 작업하다 보니 필연적으로 더 많은 부채 요소를 생성하기도 했습니다.

개발자와 저는 이 부채의 비용 요소가 어느 정도가 되는지 추정하는 데 시간을 들였고, 부채 비용은 프로젝트다 2일씩 추가 작업을 할애하고 있다는 것을 알게 되었습니다. 그리고 이러한 인건 비용과 추후 론칭에 따른 기회비용을 계산했을 때, 추가 2일 동안에 프로젝트다 $4000 이상의 손실이 발생하고 있었다는 것을 알게 되었습니다. 그 금액을 1년 동안의 프로젝트에 걸쳐 추정하면 $100,000 이상의 비용 절감 효과를 볼 수 있습니다.

스타트업의 경우 이 규모는 엄청난 숫자죠.

또한, 사용자 만족도가 증가하고 잘 정돈되고 단순하고 미적으로 만족스러운 인터페이스를 채택하게 되면, 거기서부터 비용 절감 효과가 복합적으로 증가합니다.

비용 절감 효과에 대해 설명하고, 그동안 프로젝트 기간에 얼마나 불필요한 시간 낭비를 하게 되었는지 입증하는 것이 큰 차이를 만들어 냈습니다.

이러한 모든 이점을 이해한 결과, 이해관계자들은 MVP 디자인 시스템 작업을 시작하기로 동의했습니다. 저는 주니어 디자이너를 고용할 수 있었고, 주요 iOS 제품의 기반이 될 최소한의 실행 가능한 첫 번째 버전을 달성하는 데 시간과 노력을 쏟을 수 있었습니다.

전체적으로 MVP 디자인 시스템에 구축하는 데 4개월 정도 걸렸습니다.

저는 팀과 친숙할 수 있는 환경(Figma)에서 작업해야 했고, 후임 디자이너의 계약직이 끝나기 전에, 목표에 도달할 수 있는 실행 계획을 세워야 했습니다.

1단계 - 팀 요구 사항 조사

저희의 첫 번째 단계는 디자인 시스템과 관련하여 팀의 요구 사항을 이해하는 것이었습니다. 함께 디자인 문서를 결정하기 위해, 프로덕트 팀의 각 구성원들과 개별적으로 이야기하는 후임 디자이너에게 리서치를 위임했습니다.

저희는 디자인 부채 요소가 기술 부채를 어떻게 채우고 있는지, 그리고 디자인을 코딩해야 할 때 비효율적으로 디자인을 적용했는지 알아냈습니다. 또한 저희가 도구를 사용하는 방식에도 표준과 비전이 부족하다는 사실을 알게 되었습니다. 일관되지 않은 문서화, 프로세스, 파일 구성 등은 모두 디자인 표준과 공유된 비전의 부족에서 비롯된 것이었습니다. 브랜드뿐만 아니라 프로덕트 팀 전체를 위한 것이니까요. 저희의 시각적 아이덴티티와 표현이 저희의 가치와 매우 밀접하게 연관되어 있기 때문에 저희에게 매우 중요했습니다.

저희의 조사를 통해 MVP 디자인 시스템이 회사에 필요한 4가지를 확인하게 되었습니다.

*팁: 그림의 우선순위 도표는 MVP 디자인 시스템에 포함할 항목을 결정할 때 매우 유용하게 쓰일 수 있습니다.

.  .   👇 더 자세한 내용은 아래 원문에서 확인해주세요.

더 나은 UX 디자인을 위한 5가지 심리학 원칙

심리학은 사용자 경험 디자인 프로세스의 기본적인 부분입니다. 사람들이 프로덕트와 상호 작용하는 방식과 그들의 결정이 어떻게 영향을 받거나 조작될 수 있는지 이해하는 것은 UX 디자이너가 다루는 주제입니다.

그리고 훌륭한 UX 디자이너는 인간의 마음을 잘 읽습니다. 그들은 사용자가 디자인을 어떻게 인식하는지 이해하고 디자인을 좋은지 나쁜지 분류합니다.

"사람을 이해하지 못하면 좋은 디자인을 이해할 수 없습니다." — Dieter Rams

"훌륭한 디자이너가 되려면 사람들이 어떻게 생각하고 행동하는지 조금 더 깊이 들여다볼 필요가 있습니다." — Paul Boag

다양한 심리학 원리가 인간 행동에 미치는 영향을 이해함으로써 사용자의 문제를 해결하는 솔루션을 구축할 수 있습니다. 심리학이 UX 디자인 전략을 향상시키는 방법을 발견할 준비가 되셨습니까? 계속 읽어보세요!

선택을 최소화하여 의사 결정을 유도합니다(힉스 법칙).

먼저 사용자의 삶을 더 쉽게 만들고 웹사이트나 제품에 유지하는 방법에 대해 이야기해 보겠습니다.

레스토랑에 가고 메뉴에 50개 이상의 선택 항목이 있다고 상상해 봅니다. 그리고 지금 당신이 다른 레스토랑에 가는데 메뉴에 10가지 미만의 옵션이 있다고 상상해 봅니다.

많은 옵션이 있는 것은 언뜻 보기에는 좋지만 혼란을 야기하고 클라이언트가 선택을 하는 데 더 많은 시간이 필요합니다.

힉스의 법칙은 존재하는 자극의 수와 자극에 대한 개인의 반응 시간 사이의 관계를 조사합니다. 따라서 선택할 옵션이 많을수록 사용자는 상호 작용할 옵션을 결정하는 데 더 오래 걸립니다.

수 많은 옵션이 쏟아지는 사용자는 해석하고 결정할 시간이 필요하며, 원하지 않는 작업을 수행해야 합니다.

다음은 몇 가지 핵심 사항입니다.

유사한 기능 또는 특성 공유합니다(근접성의 법칙).

콘텐츠가 많고 소화하기 쉽게 하려면 어떻게 해야 할까요?

우리는 가장 중요한 게슈탈트 원칙 중 하나인 근접성을 고려해야 합니다. 이 원칙은 색상이나 모양에 따른 유사성과 같은 다른 원칙에 중첩될 수 있습니다. 이 방법은 관련 콘텐츠를 그룹화하고 관련 없는 콘텐츠를 분리하는 데 도움이 됩니다.

요소를 결합하거나 분리하기 위해 공백을 다양하게 사용하는 것은 다른 그룹, 하위 그룹, 테마 등을 전달하는 핵심입니다. 따라서 관련 요소를 근처에 배치하고 공백을 사용하여 그룹을 만드는 것은 시각 디자인의 기본 원칙입니다. 이러한 그룹을 명확하게 함으로써 사용자 경험을 개선하고 사용자가 찾고 있는 것을 찾고 집중할 수 있도록 합니다.

. .👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UI/UX 디자인 처음부터 배우기

레벨 0부터 시작할 것이기 때문에 UI/UX 디자인이 무엇을 의미하는지 모르셔도 상관없습니다.

안녕하세요, 제 이름은 Ankit Upadhyay입니다. 제가 누구인지는 중요하지 않아요. 여러분은 저를 위해 이 글을 보진 않으니까요... 그렇죠! 여러분은 새로운 것을 배우기 위해 이 글을 보고 있어요. 여러분이 지금보다 더 나은 실력을 위해서 말이죠.

제목을 보면 이 사람이 '새내기에서 UI/UX 디자이너가 되는 방법(메모해두세요!)'을 가르쳐 준다고 나와 있습니다.

물론 그렇습니다! 정말 그렇게 할 거예요..에, 그전에 먼저 해야 할 일이... (잠깐만요! 프리미엄 플랜을 요구하는 것이 아니에요. )... 몇 가지 질문을 할 거예요... 준비되셨죠?

좋아요! (어쩜 이리 당당한지!)

첫 번째 질문은… 여러분도 편안함을 좋아하고, 디지털 세계에서도 그 편안함을 추구하시나요? 두 번째는... 여러분이 겪고 있는 불편함이 있다면 그것을 해결하기 위해 노력하고 있으신가요? 그렇다면 ... 배울 준비가 아주 잘 된 것입니다 ... 사실 여러분은 이미 디자이너입니다!

자, 그럼 기본적이고 중요한 것을 말씀드릴게요.

디자이너는 누구인가요?

'실행하기 전에 무언가를 계획하는 사람.'

즉, 어떤 일을 하기 전에 무언가를 계획하고, 매우 전략적인 방식으로 문제를 해결하려고 한다면, 여러분은 '디자이너'인 것입니다.

이 계획은 그림을 그리거나 모델이나 데모를 만들어 작업할 수 있습니다.

자동차 디자이너는 곧 출시될 새 차를, 패션 디자이너라면 드레스 및 옷장을 디자인하기 위해 모델과 다이어그램을 만듭니다.

기계의 새로운 모델을 설계하는 발명가도 디자이너입니다.

혹시 NYC에서 집을 이사할 예정이라면, 집과 같은 편안함을 느낄 수 있는 인테리어 디자이너가 필요할 것입니다.

UI 디자이너는요?

UI 디자이너는 웹 사이트, 앱 및 PC, 스마트 워치 등과 같은 많은 기기와 디지털 세계를 다루고 있습니다.

'UI'라는 용어를 처음 들어보신 분들께 알려드리자면 UI는 'User Interface'의 약자입니다.

UI는 웹 페이지 또는 앱이 어떻게 생겼는지 의미하며, 사용자가 상호 작용할 웹 페이지 또는 앱의 일부를 모든 웹 또는 앱의 UI라고 합니다.

만약 어떤 앱이나 웹페이지가 좋아 보이면 "와! 이 앱/웹은 좋은 UI(사용자 인터페이스)를 가지고 있네요!", "여기 서비스는 좋은 UI 디자이너를 썼네."라고 말할 것입니다.

UI 디자이너는 웹 페이지와 앱이 동작하기 전에 이러한 웹 페이지와 앱을 디자인합니다. 좋아요, 그게 어울리지 않는다면, 제가 예시를 한번 들어볼게요.

제 생각엔 'B'가 맞겠죠? A가 더 나쁠 수도 있지만, 절 믿으세요. 당신의 눈에서 피가 나게 하고 싶지 않아서요.

웹 페이지나 앱을 보기 좋게 만드는 것이 바로 UI 디자이너가 하는 일입니다.

모든 웹페이지나 앱 화면은 색상, 폰트, 이미지, 아이콘, 일러스트레이션 등 처리해야 할 것들이 정말 많죠.

UI 디자인은 페이지 또는 앱을 보기 좋게 만들기 위해 색상, 글꼴, 아이콘, 모양 및 일러스트레이션을 다룹니다.

UI 디자인을 배우실 의향이 있으시다면 색상, 다양한 폰트, 아이콘, 모양 및 관련 일러스트레이션의 도움을 받아 웹 페이지나 앱을 멋지게 만들 수 있는 방법을 배워야 합니다.

UI 디자인은 이러한 시각적 요소와 연관되어 있습니다. 이 모든 요소(색상, 폰트, 아이콘, 모양, 일러스트레이션)은 시각적 요소이며, UI 디자이너는 이러한 모든 시각적 요소를 더 나은 비율로 조합해야 합니다.

저는 UI 디자인의 이러한 시각적 요소에 대해 몇 마디 쓰려고 합니다.

. .👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램