모바일 앱 UX·UI 디자인의 A to Z * 본 콘텐츠는 OpenAI사의 ChatGPT 기술을 바탕으로 제작하였습니다. |
|
|
지난 6일, 한 애플리케이션의 등장으로 세계가 들썩였습니다. 바로 메타*의 '스레드 Threads'인데요. 지금까지 출시된 앱 중 가장 빠른 속도인 출시 5일 만에 가입자 수 1억 명을 돌파했다고 전해졌습니다. 국내에서도 출시 6일 만인 지난 11일에 앱 설치자 수가 107만 명에 달했다**고 하니, 그 인기가 가히 폭발적이라고 할 수 있겠죠.
*Meta, 소셜 미디어 페이스북을 개발한 마크 저커버그가 CEO인 미국의 종합 IT 기업
|
|
|
사실 세계 유수 기업 CEO 사이의 경쟁구도와 메타의 유명세에 다소 묻혔지만 스레드는 모바일 UX·UI 측면에서 볼 때 상당히 잘 만든 앱입니다. 세계 최대 소셜 미디어 그룹이 보장하는 성능과 안정성, 익숙하고 편리한 사용 방법과 깔끔한 디자인까지! 지난주 뉴스레터에서 ChatGPT가 이야기했던 '잘나가는 모바일 앱'의 조건을 모두 갖추고 있다고 볼 수 있죠.
|
|
|
자, 저희도 질 수 없겠죠? 지난주에 예고 드린 대로, 이번 주에는 모바일 앱 화면 기획에 도전해 볼 차례입니다. 본격적인 기획에 앞서 에듀코카 7월 신규 과정 <성공하는 모바일 UX 제작과정>을 통해 UI 디자인과 그 시스템에 대해 자세히 알아보고 ChatGPT와 모바일 앱 화면을 만들어 보려고 합니다. |
|
|
모바일 UI를 디자인하고 만들기 전에 한 가지 염두에 둬야 하는 중요한 개념이 있습니다. 그건 바로, '일관성'인데요. 물론 예쁘고 특색 있는 UI도 좋지만, 브랜드가 사용자에게 전하고 싶은 일관된 메시지를 얼마나 잘 다듬어 모바일 앱으로 구현할 수 있느냐가 UI 디자인의 핵심이라고 할 수 있습니다. 이처럼 편리하면서도 일관성 있는 메시지를 전달하는 UI는 어떻게 만들어야 하는 지 스튜디오 듀오톤(Duotone)의 정다영 디자이너, 최후란 연구원과 함께 알아보겠습니다. |
|
|
STEP1. UI의 원소, 'Foundation' 정의하기 |
|
|
이전 시간에 UI를 구성하는 가장 작은 단위라고 할 수 있는 색상, 글꼴 등의 요소를 규정했다면, 이들을 실제 UI에서 사용할 수 있도록 스타일 가이드화하는 작업을 해야 합니다. |
이 가이드를 통해 UI 디자인 작업 시 수많은 페이지를 만들어도 동일한 컬러, 버튼 크기와 비율 등을 사용할 수 있도록 Foundation 스타일 요소에서 규정할 수 있습니다. |
|
|
STEP2. 사용자님, 우리 'Component'로 친해져요! |
|
|
각종 요소들을 복합적으로 모아 사용자와 상호작용할 수 있는 가장 최소한의 단위인 Component를 정의해야 합니다. 버튼, 카드, 대화 등 제작하려는 앱이 어떤 스타일과 규칙을 사용할지 정하는 단계입니다. |
텍스트 기반 대화형 UI로 사용자의 빠른 입력을 도울 수도 있고 음성 인식 서비스를 활용할 수도 있죠. 공통적으로, 최적화된 서비스를 제공하기 위해 양질의 콘텐츠를 기획하고 수급하는 것이 중요합니다. |
|
|
일반 앱 UI와 달리 대화형 UI는 고정 영역과 공통 요소부터 정의한 후 상세 요소를 별도로 정의합니다. 어떤 UI든 휴먼 에러와 반복되는 설명을 최소화하기 위해서는 화면 정의서를 작성해야 하는데요. |
이때 전체 서비스 흐름부터 상세 화면별 정의까지 빠짐없는 구성은 물론, 기능에 대해 명료하고 꼼꼼하게 정의하는 것이 중요합니다. 따라서 문서의 이해도를 높이기 위한 방법을 항상 고민해야겠죠. |
|
|
하나의 모바일 앱을 제작하기 위해서 디자이너, 개발자 등 여러 팀원과 협업해야 합니다. 그리고 불특정 다수의 사용자들이 이 앱을 사용하게 되겠죠. 이때, 우리가 UI를 잘 만든다면 서로에게 공통된 언어가 생긴다고 할 수 있습니다. 다시 말해, 기본기에 충실한 디자인 구성 요소와 고품질의 콘텐츠를 갖춘 UI는 미지의 앱도 순식간에 이해시키는 공용어가 되는 것이죠. |
|
|
ChatGPT에게 콘텐츠 수강을 위한 모바일 앱 화면 기획을 부탁했습니다. 모바일 UX·UI에 대해 2주 동안 열심히 공부한 내용을 바탕으로 과연 얼마나 편리하고 유용한 모바일 앱을 설계했을지, 기대되는데요!?😎 |
|
|
💬 ChatGPT가 기획한 에듀코카 모바일 앱 |
|
|
#강의 목록(앱 구동 시 첫 화면)
- 인기/신규/카테고리별 추천 강의 표시→사용자의 관심 끌기
- 검색 기능 제공→특정 강의 찾기
|
#강의 정보(강의 선택 후)
- 강의 제목, 강사, 평점→간단한 설명 표시
- 강의 소개, 강의 일정, 커리큘럼, 강사 정보→자세한 정보 제공
- 관심 강의 등록 버튼→개인 맞춤 정보 활용
|
|
|
#진도 관리(수강 및 복습)
- 완료한 강의, 진행 중인 강의, 남은 강의 표시→학습 상황 파악 용이
- 이전에 시청한 강의로 돌아가거나 진도를 조절할 수 있는 기능 제공
|
#퀴즈/평가(수강 완료 후)
- 퀴즈나 평가 제공→사용자 이해도 평가
- 다중 선택, 주관식 등 다양한 유형의 문제를 제시→정확한 학습 결과 확인
- 사용자에게 적절한 피드백 제공→추가 학습 유도
|
|
|
ChatGPT가 꼼꼼하게 설계한 내용을 따라 머릿속으로 화면을 그려보니, 여러분도 뭔가 근사한 모바일 앱이 떠오르지 않으신가요?🤩 그가 기획한 대로 앱을 만들 수 있다면 여러분이 에듀코카의 좋은 콘텐츠를 더 많이 볼 수 있게 되지 않을까 하는 상상을 해봅니다.
요즘 핫한 모바일 UX·UI 디자인에 관심이 있으시다고요?😎 그렇다면 사용자 경험 디자인 제작에 대한 전반적인 과정, 사용자 분석에 필요한 전략 도출까지, 모두!
|
|
|
<게임인 인터뷰 : 게임 개발사, 밸런스 디자인 직무> |
|
|
모바일 UX·UI 디자인에 대해 열심히 공부했으니, 이제 실전에 돌입할 차례입니다. 디자인의 영역과 분야는 무궁무진하지만 그중 특히 '게임'이 많은 사람의 사랑을 받는 만큼, 이를 개발하는 디자인 직무에도 관심이 있는 분들이 많을 거 같은데요.🤔 |
|
|
국내에서 올해 상반기 모바일 게임만 월평균 무려 2,200만 명이 사용했다고 하니, 그 인기가 정말 어마어마합니다. 이렇게 많은 사람들이 즐겨 하는 게임의 개발 디자인 직무에 관심 있는 분들을 위해 준비한 콘텐츠! <게임인 인터뷰 : 게임 개발사, 밸런스 디자인 직무>✨
에듀코카 '바로 수강' 과정 <게임인 인터뷰 : 게임 회사> 직무 소개 시리즈에서는 여러 게임 기업군 직무와 게임 회사의 인재상 그리고 신입사원분들의 따끈따끈한 인터뷰까지 확인하실 수 있습니다.😉 |
|
|
#열정과_역량사이
이 직무에서는 서비스하는 게임에 대한 열정, 소통 능력, 그리고 성실함이 매우 중요합니다. 이들은 앞으로의 성장 가능성, 서비스 퀄리티 유지, 신속한 일 처리를 위한 필수 역량이라고 할 수 있죠. |
|
|
#경험이_곧_자산
유저가 좋아할 만한 게임 제작을 고민한 흔적과 경험도 중요합니다. 게임을 제작·서비스하는 제작자의 관점으로 그 경험이 채워졌는가가 핵심이죠. 게임 기획서를 작성해보고 분석해보면 많은 도움이 됩니다. |
|
|
#개발도_팀플레이
게임 제작 규모가 커질수록 더 많은 이슈가 발생합니다. 팀원들과 원활하게 소통하고 협업하기 위해서는 커뮤니케이션, 문서화 능력, 논리적 사고력 이 3가지 능력이 잘 갖춰져 있어야 합니다. |
|
|
쉿!🤫 여러분께만 알려드리는 게임 산업 직무의 A to Z✨
|
|
|
애정하는 구독자 여러분, 안녕하세요!😍 이 코너는 편집자가 구독자님들과 소통(이라 쓰고 수다라고 읽음)하고 싶어서 일방적으로 만들었습니다. 지난주만 하고 다음 달에나 돌아와야겠다 생각했는데 여러분들께서 좋은 의견을 계속 보내주시니, 정규 편성 안 할 이유 없겠죠!?👍 지난 뉴스레터에 대한 독자님들의 의견에 편집자가 직접 답변드립니다. 이 코너가 사라지지 않도록 더 좋은 콘텐츠를 담아 보내드리겠습니다! 감사합니다💜 |
|
|
구독자 여러분께서 주신 소중한 의견은 에듀코카 뉴스레터 발전에 쓰입니다.
많은 당근과 채찍 부탁드립니다...! -편집자 일동🥕🥕🥕 |
|
|
|
Copyrightⓒ 에듀코카 All rights reserved |
|
|
|
|
