🔖 2022년 1월 4주 TOP3

🔖 2022년 1월 4주 TOP3

 프로토 타이핑: 아이디어를 앱으로 만드는 4가지 도구

내가 작업한 모든 디지털 프로덕트 디자인 프로세스의 핵심 순간은 프로토타입을 만드는 동안 발생합니다. 새로운 프로덕트 기능을 정의하거나 아이디어를 판매하거나 기금을 마련해야 하는 경우 프로토타입이 필요합니다. 

이 아티클에서는 내 삶을 더 쉽게 만들어주는 4가지 프로토 타이핑 툴을 분석할 것입니다.

당신이 기업가이거나 기업과 함께 일하고 있고 디지털 프로덕트를 만들고 싶다면 먼저 프로토타입을 만들어야 합니다. 그것이 황금률입니다. 

저는 한동안 디지털 프로덕트를 만드는 일을 해왔고 좋은 프로토타입이 스타트업을 성공시킬 수도, 무너뜨릴 수도 있다고 100% 확신합니다. 신제품 출시에는 많은 위험이 따르며 시간이나 비용을 낭비하면 안 되기에 성공하려면 최고의 도구, 적합한 팀, 간소화된 프로세스가 있는지 확인해야 합니다.

프로토타입을 만들 때 사용 가능하고 보기 흉하지 않은 것을 만들어야 합니다. 프로토타입은 아이디어를 사람들이 테스트할 수 있는 것으로 변환하는 방법일 뿐입니다. 작동하는 와이어프레임을 사용자 앞에 놓고 사용자가 무언가를 좋아하는지(또는 사용 방법을 알고 있는지) 빠르게 알 수 있습니다.

프로토 타이핑은 아이디어의 부족한 부분을 식별하고 채우는 매우 귀중하고 간단한 방법입니다. 누구나 실수를 할 수 있으므로 시제품 제작은 시간과 비용에 더 투자하기 전에 더 저렴한 프로덕트를 만드는 방법입니다.

저는 개발자에게 의존하지 않고 고품질 프로토타입을 더 빠르게 구축하는 데 도움이 되는 4가지 코딩이 필요 없는 툴을선택했습니다.

Bravo Studio를 사용한 모바일 앱 프로토타입

모바일 앱 프로토타입을 구축 중이고 시간을 절약해야 하며 함께 일할 개발자 팀이 없다면 Bravo Studio는 훌륭한 선택입니다.

사용이 매우 간편하고 제작자가 앱 아이디어를 테스트할 수 있도록 특별히 설계된 새로운 코드 없는 앱 빌더입니다. 아직몇 가지 기능이 부족하지만 코드를 한 줄도 작성하지 않고 프로토타입을 정말 빠르게 테스트해야 할 때 올바른 방법입니다. 

사용법을 익히는데 다소 시간이 필요하지만 그렇게 어렵지 않으며 일단 작동 방식을 배우고 나면 디자인 유연성과 많은기능을 활용할 수 있죠.

무료로 시작할 수 있으며 여기에서 자습서, 리소스, 단기 집중 과정, 비디오에 액세스할 수 있습니다. WePlant, Cafe Barcelona, NextLive, Today 같은 앱들이 Bravo Studio로 구축된 앱의 몇 가지 예입니다.

Bubble을 사용한 웹 앱 프로토타입

Bubble은 웹 앱을 만들기 위한 강력하고 완전히 사용자 맞춤형 플랫폼입니다. 데스크톱과 모바일 웹 브라우저를 위한 대화형 다중 사용자 앱 프로토타입을 만들려는 경우 Bubble이 딱 필요한 시점입니다.

무료 플랜을 통해 플랫폼 작동 방식을 배우고 웹 앱 프로토타입을 구축할 수 있습니다. 또한 인터페이스 탐색에서 전문가기능에 이르기까지 시작하는 데 필요한 모든 것을 다루는 자체 아카데미가 있습니다.

프로토타입을 테스트한 후에는 계속해서 Bubble에서 제품을 계속 제작하여 MVP를 출시할 수 있습니다. Qoins, Equina, Messly, Uneebo, Teeming이 Bubble로 구축된 웹 앱의 몇 가지 예입니다.

Carrd를 사용한 원페이지 사이트 프로토타입

Carrd는 단순하고 무료이며 반응이 빠른 원페이지 사이트를 만드는 도구입니다. 서비스 아이디어, 마케팅 페이지, 제품랜딩 또는 한 페이지 사이트에 적합한 모든 것을 프로토 타이핑하려면 Carrd를 선택하세요. 수십 개의 템플릿(또는 빈 캔버스) 중 하나로 시작하여 자신만의 것으로 만들 수 있습니다. 정말 빠르고 사용자 친화적입니다.

사용자 정의 도메인, 양식, 위젯, 포함 및 분석을 추가할 수 있는 프로 버전도 있습니다. 또한 여기에서 Carrd에 대한 팁과트릭을 배울 수 있습니다. Disney+ Rebuild, Nocolo, really Good Questions, Doggie Dreams가 Carrd로 구축된 한 페이지 사이트의 몇 가지 예입니다. 

GameFroot를 사용한 게임과 대화형 경험 프로토타입

또한 대화형 경험이나 출시할 게임과 같은 다른 것을 테스트하고 싶을 수도 있습니다. 흥미로운 도구 중 하나는GameFroot입니다. 학습용 게임 프로토타입을 테스트하는 데 사용했는데 꽤 멋지고 혁신적이라고 생각합니다.

2D 게임 제작을 위한 클라우드 기반 온라인 플랫폼입니다. 시각적 드래그 앤 드롭 코딩 인터페이스와 쉬운 수준의 편집기를 결합하여 게임 개발을 쉽게 만들어줍니다. 도움이 될 게임 키트와 템플릿이 있습니다.

..

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

인지 접근성을 포함하는 UX 원칙

디자인 원칙은 새로운 것이 아닙니다. 유니버셜 디자인 원칙(Universal Design Principles), 포용적 디자인 원칙(Inclusive Design Principles), 닐슨 노먼 그룹 사용성 휴리스틱(NN Groups Usability Heuristics) 등이 있습니다.

이것들은 모두 매우 유용한 원칙들이지만, 제가 찾던 것과 같지 않은 느낌이 들었습니다. 뭔가 빠진 것 같았죠.

인지 디자인은 1970년대에 소비자 제품과의 사용자 상호 작용에 대한 연구에서 나왔으며, 80년대에 이르러서는 제품 디자인 산업에서 보편적으로 사용되었습니다. 이러한 원칙의 일부는 디지털 공간에 "사용성 휴리스틱스(Usability Heuristics)"로 옮겨갔지만 문제가 있습니다.

그것들은 앞서 언급한 다른 모든 기본 프레임워크와 유사하지만 관련이 있지만 다소 신경학적인 관점에서만 볼 수 있습니다. 왜냐하면, 사용자 그룹 내 신경 다양성에 대한 관심 인식이 급증하기 이전이었기 때문입니다.

그래서 저는 스스로에게 도전장을 내밀었습니다. 인지 디자인에 대한 닐슨 노먼 그룹 사용성 휴리스틱 해석을 기반으로하는 일련의 원칙 초안을 작성했지만 신경 다양성의 관점에서 다시 상상했습니다.

이것은 COGA나 인지적 접근성에 초점을 맞춘 다른 프로그램을 대체하는 것이 아니라 단일 신경 발산인(나)의 관점에서입증된 디자인 프레임워크를 재맥락화하는 방법입니다.

다음 각 원칙 뒤에는 닐슨 노먼 그룹의 사용성 휴리스틱과 웹사이트와 기본 모바일 애플리케이션에 대한 관련 BBC 접근성 지침에 대한 링크가 있습니다.

BBC 가이드라인에 링크를 추가한 이유는 그것들이 인지적 접근성이 내장되어 작성되었기 때문입니다. 그런 다음 원칙을 취하고 구현에 관한 실용적인 지침을 추가했습니다.

1. 표준 요소

많은 사용자 오류는 실제로 작동 방식의 디자인 불일치로 인해 발생하므로 유사한 요소가 동일한 방식으로 작동하는지확인하세요. 표준 디자인 패턴은 오류를 방지하는 데 도움이 되므로 디자인 시스템, 디자인 규칙과 웹 표준이 매우 중요합니다.

사용자는 이미 보편적으로 학습한 공통 작업의 상호 작용을 다시 배울 필요가 없습니다. 모든 기능적 디자인은 양방향과정보적 관점에서 시청각적 일관성을 가져야 합니다.

2. 어포던스와 기표

어포던스(affordance)는 요소가 상호 작용할 때 행동하는 방식으로 인식됩니다. 모든 어포던스가 의도적으로 설계된 것은 아닙니다.

기표는 작업이 수행되는 방법과 위치를 정의하는 아이콘, 레이블, 색상 또는 소리입니다. 기표는 우리에게 무엇을 해야 하는지 알려주고 어포던스를 명확히 합니다.

어포던스와 기표는 디자이너가 인식과 기대를 활용할 수 있도록 합니다.

어포던스와 기표의 개념은 표준의 개념과 밀접하게 관련되어 있지만 의식적으로 결정되지는 않습니다. 표준이 불일치를제거하기 위한 공식 합의인 반면, 어포던스와 기표는 시간이 지남에 따라 발전해 온 비공식 관습을 기반으로 할 수도 있습니다.

어떤 행동을 취해야 한다는 인식과 행동 자체 사이에는 항상 강한 관계가 있어야 합니다. 관련 닐슨 노먼 그룹 기사의 시스템과 실제 세계 간의 일치를 참조하세요.

3. 단순성

정보가 너무 많다는 것은 양의 문제일 수도 있고 너무 복잡한 방식으로 제공되는 정보일 수도 있습니다. 일반적으로 비주얼과 UX 디자인의 모범 사례는 프레젠테이션과 상호 작용을 모두 단순화하기 위해 노력합니다.

혼란은 주의를 분산시키고 인지 부하를 증가시켜 사용자 응답 시간과 정확도를 감소시킵니다. 미적 디자인과 미니멀리즘디자인에 대한 닐슨 노먼 그룹 기사를 참조하세요.

..

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

다크 UI 디자인: 원칙과 모범사례

프로덕트의 외관과 느낌을 만드는 것은 디자이너의 주요 책임 중 하나입니다. 즉, 초기 디자인 결정은 프로덕트의 목적, 특정 상황, 청중에 적합해야 합니다.  기본적으로 밝은 배경에서 UI를 디자인하는 것이 일반적인 본능이지만 최근에는 다크 테마의 출현으로 인해 일부 디자이너는 어두운 캔버스를 선택합니다.

밝은 배경을 선택하는 데에는 그만한 이유가 있습니다.  대비, 텍스트, 가독성, 그리고 다양하게 미묘한 색상으로 작업할수 있는 기능이 그 중 일부입니다.  또한 많은 과학 연구에 따르면, 최적의 가독성을 위해서는 흰색 배경에 검은색 텍스트가 필요합니다.  일부 회사 로고와 색상은 어두운 색상 팔레트에서 작동하지 않기 때문에 브랜딩도 결정에 영향을 미칠 수있습니다.

또한 사람들은 흰색 배경에 어두운 잉크로 렌더링된 다양한 콘텐츠를 보는 데 익숙합니다.  350년 이상 된 신문과 잡지를생각해 보세요.  3만 5천 년 전 구석기 시대(원시인 시대)로 거슬러 올라가면, 우리는 일반적으로 묘사를 그리는 데 사용되는 숯이나 탄 뼈를 사용하여 밝은 배경에 들소와 매머드의 동굴 그림을 배치한 것을 볼 수 있습니다.

그럼에도 불구하고 프로젝트가 승인난다면, 오늘날의 디지털 프로덕트 디자이너는 다양한 이유로 어두운 색 구성표로 작업할 수 있습니다.  이는 종종 드라마를 전달하고 감정을 이끌어내기 위한 미학적 선택(예기치 않은 것)이거나 디자이너가 디자인과 브랜딩을 융합하거나 시각적 콘텐츠가 눈에 띄게 하려는 경우가 많습니다.

"어두운 면(Dark Side)"의 함정을 조심하세요

파워, 우아함, 미스터리와 관련된 다크 UI가 있는 디지털 프로덕트는 엄청난 트렌드입니다.  다크 모드가 눈의 피로를 줄일 수 있다고 흔히 말하지만 이것이 사실이라는 증거는 없습니다.  OLED 화면을 사용하면 배터리 수명도 절약할 수 있습니다.  그럼에도 불구하고 어두운 테마는 미학적 선택인 경우가 많습니다.

다크 UI 디자인으로 작업한 적이 없고 두 발로 뛰어들기로 결정한 디자이너는 미지의 바다에 빠진 자신을 발견할 수 있습니다.  다크 UI의 바다에서 규범이 구부러지고 규칙이 바뀌며 함정이 넘쳐납니다.

디자이너가 "어두운 면(Dark Side)"로 넘어가기로 선택한다면, 여러 가지 문제에 직면하게 됩니다.  주로 검색 가능성, 가독성, 대비와 관련된 사용성 문제가 발생합니다.  다양한 사항을 고려해야 합니다.  텍스트와 배경, 프로덕트가 사용될 환경, UI를 볼 가능성이 높은 장치 간의 충분한 대비를 고려해야 합니다.

우리는 또한 색상 심리학을 염두에 두어야 합니다. 대부분의 색상은 사람마다 다른 것을 나타냅니다.  서양 문화에서 흑색은 종종 죽음, 신비, 악과 관련이 있습니다.  녹색은 자연 때문에 성장과 관련이 있습니다.  파란색은 하늘과 물과 관련이있기 때문에 거의 보편적으로 진정시키는 것으로 간주됩니다.  색상은 감성적이므로 다크 테마 디자인은 주의해서 다뤄야 합니다.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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