https://wcaxc5215.tistory.com/35

 

[UX/UI 디자인 입문]UX 디자인 초보라면 꼭 알아야 할 디자인 씽킹 개념

디자인 씽킹이란? 논리적으로 제품을 만들 수 있도록 도와주는 프레임 워크 중 하나입니다.사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스를 디자인 씽킹이라고

wcaxc5215.tistory.com

 

디자인 씽킹이란

논리적으로 제품을 만들 수 있도록 도와주는 프레임 워크 중 하나입니다.

 

오늘은 5단계의 디자인 씽킹 중 

1~2단계를 진행했습니다.

 

배달의 민족 사용자를 대상으로 집이 아닌 다른 장소(회사 또는 야외)에서

주문 시 어떤 오류와 불편사항들이 있는지 알아보기 위해 진행해 보았는데요.

 

첫 번째 공감하기의 방법으로

A-E-I-O-U 방법으로 사용자와 공감할 수 있는 부분을 찾으려고 노력해 보았습니다.

사용자는 회사 동료와 함께 장시간 운전으로 출장을 간 상태입니다.

피로와 배고픔이 몰려오는 상태로 숙소에 도착해 바로 배달 음식을 주문하려고 하는 상황이에요.

사용자의 주변과 상호작용, 동료들의 대화에는 어떤 대화가 오갈 수 있는지 등을 파악하고 사용자는 어떤 상황에서 음식을 선택하고

앱을 켜고 끄는지를 파악해 보았습니다.

 

 

 

 

아에이오우로 사용자의 성격과 환경에 대해서 공감해 본 후 배달의 민족 어플에 관련 문의가 있는지 찾아보았습니다.

음... 아쉽게도 제가 선택한 주제에 들어맞는 리뷰는 찾기 힘들었어요. 

그렇지만 흥미로운 리뷰를 찾아볼 수 있었습니다.

이렇게 찾은 자료들이 어피니티 다이어그램을 만들 재료가 될 거예요!

서로 비슷한 문장끼리 묶어줘서 정리를 해보겠습니다.

 

 

 

글씨가 많이 작아서 안 보이지만...

저는 이렇게 정리를 해주어 보았습니다.

많은 사용자들이 주문 화면에 대한 불편이 많았던 것 같아요!

그중 돋보이는 건 배달의 민족의 리뷰를 사업자분들이 지울 수 있는 것에 대한 불만이 눈에 잘 보였습니다.

문제 정의를 하여 이제 아이디어를 도출해 볼 수 있을 것 같습니다!

 

이렇게 만들고 보니 AEIOU 분석에서 조금 더 객관적인 정보를 다뤄야겠다는 생각을 했는데요.

기존에 작성한 AEIOU는 제 경험을 토대로 작성하여 조금은 주관적인 정보가 섞였을 수도 있겠다는 

생각이 있어서 리뷰를 토대로 AEIOU를 재작성해보았습니다.

다시 작성한 AEIOU는 조금 더 객관적으로 작성해보려고 했습니다.

리뷰를 남긴 사람들마다 다른 의견들이 있었지만 비슷한 리뷰들을 묶어 어떤 상황이 있을지 공감하면서 작성해 보았습니다.

 

 


개인 회고

디자인 씽킹 공감하기와 문제 정의를 해보면서 AEIOU 공감하기가 조금 어려웠다고 생각했습니다.

AEIOU 작성하면서 사물에 대해서 왜 쓸까?라는 생각을 해보았습니다.

튜터님께 말씀해 주시길 공감하기 단계에서 관찰을 체계화하고, 진짜 문제를 발견하기 위한 도구라고 말씀해 주셨는데요.

사용자의 행동과 맥락의 깊은 이해를 할 수 있게 도와주는 도구라고 이해해 보았어요.

그렇지만 개인적으로 이 도구로 핵심 인사이트를 얻는 것은 어렵겠다는 생각이 있네요.

AEIOU 도구보다는 제가 만약 실무자가 된다면 인터뷰 지를 선호하게 될 것 같다고 느꼈습니다.

 

A : 정보 중심 설계

사용자에게 콘텐츠의 줄거리나 주요 내용을 미리 전달할 수 있다

내용 이해가 중요한 다큐멘터리나 시리즈물(드라마)에 적합하다

사용자 시나리오가 어느 정도 한정적이면서 안정되기 때문에 A 안이 선호될 것 같다.

 

B : 비주얼 중심 설계

썸네일 이미지로 간햑히 나열해 비주얼 중심으로 정보를 전달

사용자가 이미지를 보고 빠르게 회차를 탐색할 수 있게 함

예능이나 영화와 같은 콘텐츠에 어울림

 

결론 : 사용자의 행동을 유도하는 전략 중 어떤 방법이 좋은가?를 묻는 다면 

드라마, 다큐멘터리 같은 콘텐츠에는 A안을, 영화나 예능 같은 콘텐츠에는 B안을 선택하게 될 듯

 

스파르타 내일 배움 캠프가 벌써 20일이 넘어갔습니다.

벌써 20% 이상을 들었다니 시간이 정말 빠르게 느껴지네요 ㅜㅜ

이번 과제는 디자인 씽킹하기!

 

과제 목표는 배운 내용을 종합적으로 활용하여 제품을 논리적으로 설계하고 디자인으로 표현하기 위함입니다.

음식 배달/외식 시장을 타깃 하는 한 가지 아이디어를 도출하고, 와이어프레임으로 표현하는 것이 목표입니다.

 

오늘은 문제 정의를 위한 1단계 공감하기를 하려고 팀원들과 함께 질문지를 작성해 보는 일을 했습니다.

그리고 여기서 나오는 정보들 또한 인사이트로 만들어 보려고 해요.

 

일단 사용자 시나리오를 작성하고 사용자들이 한 화면 넘어가고 넘어갈 때의 이탈할 수 있는 요소는 무엇이 있을까?

불편하게 만드는 UI적 요소나 행동들이 무엇이 있을까?를 초점에 맞추어 진행해 보았습니다.

 


 

개인 회고

오늘은 팀원들과 오후 시간을 시나리오를 토대로 작성한 사용자 질문지를 만드느라 시간을 다 소비한 것 같습니다.

하지만 결론은 어떤 사용자들을 대상으로 아이디어를 도출하여 와이어프레임으로 만들어 볼 것인가가 중요하다는 것을 깨달았어요.

그래서 함께 회의한 내용이 무용지물이 될 수도 있겠다 싶었지만 이 질문을 가지고 팀원들 각자 관찰할 사용자를 선정하고 

더욱 세부적인 질문을 찾는 것으로 마무리하게 되었습니다.

 

이번 과제는 정답이 없어 보이는 정말 힘든 과제인 것 같네요.. ㅎㅎ

그렇지만 이번 과제는 UX 디자이너만이 아닌 다른 업무에서도 필요할 수 있는 스킬이라고 생각이 되어서

즐겁게 공부했습니다!

 

 

 

정리

 

한동안 디지털 디자인의 시대는 '플랙 디자인'이었습니다.

단순하며 직관적인 스타일은 복잡했던 스큐어모피즘을 대체하며 빠르게 확산되었는데요.

특히 2012년 IOS 7의 등장 이후 전 세계 앱과 웹 인터페이스가 플랫 스타일을 따르기 시작했죠.

 

하지만 최근, 다시금 '입체적이고 감각적인' 디자인이 주목받고 있습니다. 

애플의 IOS 18 업데이트, 안드로이드의 UI변화, 감각을 자극하는 다양한 디자인 인터페이스 사례들이

그 흐름을 보여주고 있습니다.

디자인은 왜 다시 질감을 찾기 시작했을까요?

 

 

 

플랫 디자인은 '본질에 집중하는 디자인'이었습니다. 군더더기를 덜어낸 UI는 깔끔하고 기능적이었지만,

시간이 지나면서 오히려 개성 없는 디자인을 양산하는 결과를 낳았습니다.

→ 아이콘은 단순한 선 형태로 통일되고

→ 버튼은 평평해지고

→ 색상은 무채색 또는 파스텔톤에 갇혔습니다.

브랜드의 차별성은 점점 사라지고 사용자들은 어떤 앱을 사용하든 비슷한 느낌을 받게 되었습니다.

무엇보다, 플랫 디자인은 몰입감과 감각적 경험을 전달하는 데 한계를 드러냈습니다.

 

디자이너들은 이제 공통된 하나의 목표를 가지고 새로운 흐름을 만들어 가고 있습니다.

바로 디지털 공간을 '머무르고 싶은 경험'으로 만드는 것입니다.

1) Realistic UI

현실감 있는 애니메이션과 인터랙션을 적용한 UI는 게임 디자인에서 많은 영감을 받았습니다.

 • 버튼을 누르면 실제로 눌리는 듯한 미세한 반응

 • 그림자, 하이라이트, 입체감을 활용한 요소

 • 정보 전달을 넘어서, 마치 '살아있는 UI'처럼 느껴지는 인터페이스

 

 

2) Retro UI 

레트로 감성 역시 주목받고 있습니다. 90~2000년대의 픽셀 UI, 클래식 폰트, 옛날 윈도우나 아이팟 스타일의

디자인들이 다시금 등장하고 있습니다.

 

이 흐름은 단순히 '복고'가 아닌 익숙함과 편안함, 집중 가능한 공간을 되찾기 위한 시도입니다. 

 

 

디지털 공간은 이제 '머무는 공간'이 되었습니다.

우리는 이 공간 속에서 일하고, 소비하고, 쉬고, 감정을 느낍니다.

그렇기에 사용자들도 다음과 같은 경험을 원하게 되었습니다.

 • 클릭할 때 미세한 촉각적 반응

 • 화면을 통해 느껴지는 질감과 분위기

 • 정보가 아닌 경험을 제공하는 UI

사람들은 무한 스크롤, 숏폼 콘텐츠, 피드 기반의 과잉 정보 환경에서 오히려 "프레임이 있는 UI"를 통해

휴식과 집중을 찾고 있습니다.

즉, 목적에 필요한 만큼 몰입감을 가질 수 있는 UI가 필요합니다.

 

디자인은 이제 단순히 잘 정리된 UI를 만드는 것을 넘어, 사람들이 자연스럽게 머물고 싶은 디지털 공간을 

만드는 일이 되었습니다.

 • 감성을 담아내는 질감과 인터렉션

 • 의미 있는 시각적 경계를 만든 구조적 UI

 • 정보를 넘어 감각과 경험을 남기는 디자인

앞으로의 디지털 디자인은 다음과 같은 방향을 해야할 겁니다,

우리가 디자인해야 하는 것은 '화면'이 아닌 기억에 남는 순간과 몰입의 공간입니다.

 

 


나의 생각

최근 사용하면서 인상 깊었던 UI가 있습니다. 안드로이드 7.0 버전으로 업데이트되면서 

많은 UI가 바뀐것을 확인했습니다. 지난날 동안 많은 업데이트가 있었지만 이렇게 눈에 보이는 UI요소가

바뀐 적은 오랜만인 것 같습니다.

먼저는 상단 화면의 시간 타이포그래피가 굵어지면서 시간이 눈에 더 잘 보이게 바뀌었다고 생각했습니다.

그리고 배터리 표시 부분의 배터리양 숫자가 도형으로 들어가면서 여분 공간을 더욱 확장시켜 준 것이

인상 깊었습니다.

그렇게 생긴 여유 공간에 재생되고 있는 음악 또는 영상앱의 앱 표시를 알림 보다 크게 배치해 준 것도 

디지털 경험을 한층 개선해주었다고 생각했습니다.

 

 

디자인 씽킹이란? 

논리적으로 제품을 만들 수 있도록 도와주는 프레임 워크 중 하나입니다.

사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스를 디자인 씽킹이라고 합니다.

 

그럼 디자이너는 왜 디자인씽킹을 알아야 할까요?

디자인이란 아이디어를 눈에 보이는 것으로 만드는 일입니다.

그렇지만 회사에서는 빠른 시간 안에 논리적이고, 현실적인 디자인을 해야 합니다.

그렇기 때문에 디자인 씽킹은 아이디어를 빠른 시간에 논리적, 현실적으로 눈에 보이는 것을

만들 수 있도록 도와주는 도구 이기 때문에 디자이너는 디자인 씽킹을 알아야 합니다.

 

 

 

디자인 씽킹은 총 5단계로 구성됩니다.

그리고 각 단계마다 사용자의 데이터를 어떤 식으로 기록하고 수집할지 간단하게 알아보겠습니다.

 

1. 공감하기 Empathy

인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고 그들의 경험을 완전히 이해하기 위한 노력을 

하는 단계입니다.

 •  A-E-I-O-U관찰법 : 활동 Activities, 환경 Environments, 상호작용 Interactions, 사물 Objects, 사용자 Users를 주제로

정보를 파악하는 방법

 • 공감지도 (Empathy Map) : 6개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 도구

 • 인터뷰 : 실무에서 자주 사용하는 방법 

 

A-E-I-O-U관찰법 참고 아티클

https://blog.naver.com/designvista/223743583247

 

A-E-I-O-U 관찰법으로 사용자 깊이 이해하기 | TIL #06

A-E-I-O-U 관찰법으로 사용자 깊이 이해하기 | TIL #06 오늘은 디자인 프로젝트에서 사용자 정보를...

blog.naver.com

 

 

2. 문제 정의하기 Define

공감으로 얻은 정보를 해석하여 사용자가 불편함을 느끼는 지점을 발견하는 단계입니다.

 • 친화도 분석 (Affinity Diagram) : 정보를 최대한 많이 수집하여 연관된다고 생각되는 정보를 그룹화하여 정리하는 분석

 • 페르소나 (Persona) : 제품의 사용자를 대표하는 가상의 인물을 만들어 어떤 문제점이 있는지 정보를 작성하는 방법

 • 5 Whys : 분석하고 싶은 문제에 Why 꼬리표를 붙이며 대답과 질문을 반복하는 방법 (5번 이상이어도 됨)

 • 사용자 여정 지도 (Customer Journey Map) : 사용자가 제품을 처음 만나는 시점부터 끝나는 시점까지의 경험의 흐름을

시간이나 순서등에 따라 분석하는 방법

 

 

3. 아이디어 발산하기 Ideate

다양한 아이디어를 내고, 그중에서 가장 적합한 아이디어를 선택하는 단계입니다.

 • HMW(How Might We?) : '만약 ~ 할 수 있다면 어떨까'라고 질문을 사용해 가정과 상상 속에서 아이디어를 이끌어 내는 방법

 • SCAMPER : 7개의 키워드로 질문을 던지고 대답을 생각해 보면서 생각을 전환해 보는 방법

 • 브레인스토밍 (Brainstorming) : 여러 사람이 함께 모여 최대한 많은 아이디어를 도출하는 방법

 • Yes and : "네, 그리고~"라는 대화법으로 상대방의 말에 동의한 후 이야기를 이어 나가 보는 방식

 

스캠퍼 기법 참고 아티클

https://www.edrawsoft.com/kr/diagram-tutorial/what-is-the-scamper.html

 

스캠퍼 기법, 창의적인 문제 해결을 위한 발상의 전환

본문을 통해 스캠퍼 기법에 대해 알아보세요.

www.edrawsoft.com

 

 

4. 프로토타입 만들기 Prototype

사용자가 아이디어를 경험할 수 있도록 구체적인 제품이나 서비스로 개발하는 단계입니다.

 • 와이어프레임 (Wireframe) : 화면의 인터페이스를 단순한 선과 도형으로 표현한 것

 • 목업 (Mockups) : 실제 프로덕트의 시각적인 컨셉을 담은 화면

 • 프로토타입 (Prototype) : 와이어프레임이나 목업의 화면에서 실제 움직임을 구현한 것

 

 

5. 테스트하기 Test

프로토타입을 사용자가 직접 사용해 보게 하고 피드백을 받는 단계입니다.

 • 사용성 테스트 (Usability Test) : 사용자에게 직접 제품을 보여주고 평가받는 것

 • 휴리스틱 평가 (Heuristic evaluation) : 특정 기준에 따라 제품의 사용성을 평가하는 것

 • 린캔버스 (Lean Canvas) : 제품을 평가할 수 있는 9개의 항목으로 구성된 도표

 • 역할극 (Role Playing) : 실제 제품을 사용하는 상황을 가정하고 사용자 역할을 대신해 보면서 문제점을 찾아보는 방법

 

이 5단계의 프로세스는 꼭 1번에서 5번으로 한 방향으로만 진행이 되는 것은 아닙니다.

필요에 따라 되돌아오기도 하며 일부를 반복하기도 하는 것을 알아야 합니다.

 

우리는 데이터를 체계적으로 잘 활용할 수 있는 프로세스가 중요합니다. 

데이터가 모든 정답을 말해주지는 않지만 도구에 따라 사용하는 사람에 따라 결과가 달라질 수 있습니다.

어떤 데이터를 보고, 어떻게 해석할지 결정하는 것은 결국 사람의 몫입니다.

 

데이터는 사용자를 이해하기 위한 도구이고, 디자인씽킹은 데이터를 체계적으로 활용할 수 있게 해 줍니다.

 


연습해 보기

  저는 스카이스캐너라는 어플을 가지고 디자인 씽킹을 연습해 보았습니다.

어플 사용 시 사용자가 느낄 수 있는 불편함이 무엇이 있을까?를 고민해 보다가 항공권 티켓 구매 시 항공사마다 

입력해야 하는 정보와 인터페이스들이 다른 것을 느꼈습니다.

공감지도를 사용하여 사용자들이 이 과정에서 스카이스캐너 어플에서 결재를 포기하는 경우를 페르소나로 잡고 공감해 보았는데요.

그리고 5whys를 활용해 대답에 질문을 물며 문제를 정의해 보았어요.

마지막으로 스캠퍼 기법을 활용해 7개의 키워드로 질문을 던지고 과정과 결과를 생각해 보면서 아이디어를 내어보았습니다.

 


개인회고

데이터의 중요성이 얼마나 큰지 배우게 된 하루였습니다.

데이터를 관리하고 정리하는 일이 UX 디자이너의 매력이지 않을까를 생각해 보게 되었는데요.

아직 많은 내용이라 머릿속에 완벽히 정리되지는 못 했지만 5가지의 프로세스와 그중 핵심이 되는 방법 하나씩은 외워 보았습니다.

디자인을 할 때 중요한 건 심미성만이 아닌 다양한 사용자의 관점이 중요하다를 느끼게 되었습니다.

결국 사용자가 제품을 사용하고 회사의 이익이 됨으로 회사는 사용자를 조사하는 것이 결국 끊임없는 굴레이기 때문에

디자이너에게 공부란 평생 가져가야 할 숙제이지 않을까? 싶습니다.

출처 : https://brunch.co.kr/@hyerimitedux/1

 

인간이 발견하고, 이해할 수 있는 디자인

도널드 노먼의 <디자인과 인간 심리> (1) | 이론을 떠먹여 드려요, 첫 번째 오늘의 도서,『디자인과 인간 심리(The Design of Everyday Things)』입니다. 1988년 초판이 출간된 이후, 35년 넘게 전 세계 디자

brunch.co.kr

 

 

 

정리

사용자가 제품을 사용할 때 실수하는 이유는 무엇일까요?

'왜 버튼을 눌렀지만 동작이 안 될까?' 

이런 의문을 풀어주는 도널드 노먼의 '디자인 원칙'을 소개해주는 아티클이었는데요.

 

노먼이 말한 디자인 원칙이란 

지각 가능한 신호와 명시적 단서의 차이를 중요하게 말해주고 있습니다.

즉, 디자이너는 사용자가 제품의 목적과 사용법을 바로 이해할 수 있는가?입니다.

예를 들어 당겨야 할 문 손잡이와 밀어야 할 손잡이를 '손잡이'라는 요소를 사용하여

밀어야 할지, 당겨야 할지를 텍스트 형태가 아닌 손잡이의 형태와 배치만으로 사용자에게 올바른

방향으로 열 수 있도록 돕는 것이 좋은 디자인입니다.

 

조금 더 자세히 보자면 좋은 디자인의 7가지 원칙은

1. 가시성 : 기능이 눈에 잘 보여야 함

2. 매핑 : 조작 방식이 결과와 직관적으로 연결돼야 함

3. 피드백 : 행동에 대한 반응이 즉시 나타나야 함

4. 일관성 : 유사한 동작은 유사하게 보여야 함

5. 제약 : 잘못된 사용을 방지해야 함

6. 정신모형 : 사용자가 상상하는 시스템 모델을 고려해야 함

7. 애러 방지와 복구 : 실수했을 때 회복 가능해야 함

노먼은 사용자가 어떤 행동을 할 때, 두 가지 간극이 발생한다고 말합니다.

  - 실행의 간극 : 사용자가 '무엇을 해야 하는지' 몰라서 실행하지 못하는 경우

  - 평가의 간극 : 행동 후 '잘 됐는지'를 파악하지 못하는 경우

디자이너의 역할은 이 간극을 최대한 줄여주는 것입니다.

즉, 사용자에게 명확히 알려주고, 빠르게 피드백을 주는 것이 핵심입니다.

 

결국, 문제는 사용자에게 있는 것이 아닙니다.

하지만 많은 디자이너가 사용자에게 실수를 떠넘기곤 합니다.

노먼은 "디자인이 잘못되었을 뿐, 사용자는 실수하지 않았다."라고 말합니다.

UX 디자이너란 기능이 아닌 사람을 설게 해야 하며 사람의 '행동 방식'을 이해하는 것, 그것이 진짜 디자인의 시작임을 알아야 합니다.

 


참고 아티클

https://brunch.co.kr/@hailey-hyunjee/46

 

UX 디자인을 위한 7가지 원칙

내가 디자인을 할 때 중요하게 생각하는 UX의 원칙들 | UX 디자인은 알면 알수록 재미있지만 한편으로는 알면 알수록 어렵다. '열 길 물속은 알아도 한 길 사람 속은 모른다.' 열 사람이 있다면 열

brunch.co.kr


 

 

나의 생각

내가 지난 디렉터로 일 하는 동안 "나는 어떤 디자인을 해왔을까?"라는 의문과 생각을 하게 해 준 아티클이었습니다.

포토존을 만들면서 그냥 "예쁘면 됐지", "사람들이 사진찍기 좋으면 됬지", 그저 심미만을 추구한 디자인을 해왔다고 생각했습니다.

포토존이라는 사람들이 참여하고 '여기서 사진 찍고 싶다'라는 사용자에 대한 경험을 생각하지 못했던 것 같습니다.

결국 내가 한 디자인이 어쩔 땐 '불 친절한 디자인이었을 수도 있겠다'라는 생각을 하게 되었습니다.

노먼이 말하는 디자이너란 실행의 간격과 평가의 간격을 최소화하는 사람이다라는 말씀이 참 와닿았습니다.

앞으로는 보기 좋은 디자이너가 아닌 사용자의 '인지'와 '행동' 그리고 '감정'까지 컨트롤할 수 있는 사람이 되어보자!라는 마음을 가지게 되었습니다.

 

 

 

신규 알림 뱃지 디자인 각 디자인에 어떤 의도가 담겨 있을까?

 

A의 의도

 • 사용자가 정확히 몇 개의 알람이 있는지 파악할 수 있도록 돕는다.

 • '9+'처럼 숫자 표현을 단순화해 인지 피로도를 낮추면서도 정보는 유지한다.

 • 사용자가 알림을 놓치지 않고 관리하도록 유도하여, 주의 환기에 효과적이다.

→ 메시지나 sns, 커뮤니티 알림 등 사용자의 참여나 응답이 필요한 서비스에 효과적이다.

알림 개수가 의미 있는 정보로 작용할 때 유용.

 

B의 의도

 • 알림이 있다는 사실만 인지시킨다. 부담을 줄이는 디자인

 • 숫자에 민감한 사용자에게 스트레스를 유발하기 않도록 배려한다.

 • 가벼운 소식이나 긴급하지 않은 알림을 표시할 때 적합하다.

→  SNS, 쇼핑 앱 등에서의 이벤트 소식이나 추천 콘텐츠 등에 적합하다.

알림의 개수보다 존재 자체가 중요할 때 사용되면 좋을 것 같다.

 

 

나의 생각

A 같은 경우 사용자에게 "빨리 확인하세요" 같은 느낌을 주는 기분이다.
반면 B 같은 경우 사용자에게 "알림은 왔지만 나중에 확인하셔도 돼요~"와 같은 느낌이 든다.

개인적으로 앱 알림이나 서비스 안에서의 알림을 잘 신경쓰지 않는 편이지만,

UI 디자인에서 숫자 하나, 점 하나는 단순한 시각 요소를 넘어 사용자의 인지와 감정, 행동까지 유도하는 힘을

가진다는 생각을 하게 되었다.

 

 

내일 배움 캠프가 이제 3주가 지나갔습니다!

오늘이 끝나면 이제 기대하고 고대하던 연~~~휴가 기다리고 있네요 ㅎㅎ

연휴 중 계획해둔 일정은 없지만 쉬엄쉬엄 할 수 있다는 게 참 행복하네요 ㅎㅎㅎㅎㅎㅎ

 

 

 

어제부터 피그마 활용 심화 강의를 듣기 시작했습니다.

오늘은 IOS와 안드로이드의 앱이 어떻게 

다른지 스타벅스 홈 화면으로 알아보는 공부를 해보았습니다!

 

 

위에 있는 이미지는 안드로이드이고 밑에 있는 이미지는 IOS 인데요.

저는 스타벅스의 홈 화면을 기준으로 분석을 해보았습니다!

가장 먼저 앱 화면 위에 아이콘의 컬러가 다르다는 걸 느꼈는데요

배경의 컬러가 다르지만 IOS의 배경 컬러와 아이콘의 컬러가 비슷한 밝기의 컬러를 가지고 있어서 

보기가 힘들더라구요.

 

그리고 가장 큰 차이로는 하단에 있는 딜리버스 버튼의 생김새가 보이는데요.

가장 먼저 차이가 나는 것이 그림자라고 생각했어요.

(컬러의 차이는 디스플레이마다 다를 수 있기 때문에 일단 배제해두었습니다.)

다시 보니 또 다른 차이가 보이는데요.

버튼의 패딩값이 다른 점을 확인할 수 있습니다.

그리고 마진값도 다르네요 :)

 

 

다른 화면에서도 찾아보았습니다.

슬라이드로 아래로 내렸을 때 칩의 그림자가 또 다른 것을 확인했습니다.


IOS와 안드로이드의 UI의 차이가 어떤 것이 있을지 이렇게 찾아본 후 

안드로이드와 IOS 앱 디자인 가이드 사이트에서 확인을 해보았습니다!

https://developer.apple.com/design/human-interface-guidelines

 

Human Interface Guidelines | Apple Developer Documentation

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

developer.apple.com

https://m3.material.io/

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io


 

IOS의 아이콘 기준에서 배경색과 아이콘 컬러에 대한 내용을 가져왔습니다.

아이폰의 종 모양 아이콘은 보기 어려웠는데
IOS에서 말하는 좋은 앱 아이콘이라고 보기 어렵다고 생각합니다.
중요한 알림일 수도 있는 기능인데 잘 보이지 않는 컬러로
배치한 이유가 뭘지 한번 생각해 봐야겠습니다.
안드로이드에는 아이콘 배경색에 대한 지침을 확인하지 못했습니다.

 

 

 

또한 그림자에 대한 내용에서 안드로이드 디자인 가이드 기준에서 확인해 보았습니다.

위의 내용에서 안드로이드에서는 컴포넌트의 기본 높이에 대한 기준이 명확하게 있었습니다.


 

 

챗 지피티의 앱도 안드로이드와 IOS 버전이 다른 것을 확인해 보았습니다.

안드로이드와 IOS 버전에서 어떤 기준이 있기 때문에 이렇게 다른지 함께 확인해 보면 좋을 것 같습니다 ㅎ

 

 


개인 회고

오늘은 안드로이드와 IOS의 차이에 대해서도 공부했지만 웹과 앱의 차이도 다름을 배웠습니다. 웹에서의 그리드와 태블릿과 앱의

그리드 차이가 다름을 알게 되었는데요. 그 기준을 디자이너가 잡고 디바이스마다 디자인을 하는 것을 알게 되었습니다.

 

또한 디자인을 하기 전 작업이 생각보다 여러 방법이 있다는 것을 알게 되었는데요.

사용자 시나리오와 IA로 기획을 해보는 것도 있음을 알게 되면서 "와 간단해 보이는 앱조차 이런 과정을 가지고 앱이 만들어지는구나"라는 것을 생각하게 되었습니다.

 

 

+ Recent posts