본문 바로가기

내일배움캠프/사전캠프22

[UX/UI 사전캠프_21일차] 나의 관심 분야 서비스 만들기 (3) 어제 만든 와이어프레임에 컬러, 사진 등을 넣으면서수정도 하고, 화면도 추가하는 작업을 했다. 우리동네 멍멍이들, 우멍 : 주요화면 기존 반려동물 앱 서비스는 오렌지, 옐로우 같은 컬러를 많이 사용했다.그래서 우멍도 따뜻한 오렌지 컬러를 메인 컬러로 활용했고,나름 2024 팬톤 컬러인 피지퍼즈를 보조 컬러로 넣어 따뜻함을 더 강조해줬다. 강아지 일러스트는 최대한 간단하게 다 빼고, 컬러도 하나만 단순하게 칠했지만 여전히 복잡해 보이는 것 같다.확실히 앱에서는 음영이 없고 똑 떨어지는평면적인 일러스트? 그런게 잘 어울리는 것 같다.  로그인 화면은 최대한 간단명료하고, 쉽고 빠르게 끝낼 수 있도록 만들었다.특히 보호자 프로필 쓰는게 귀찮게 느껴져서,반려견 추가 화면만 바로 나오게 만들었다.  주요 서비스인.. 2024. 5. 24.
[UX/UI 사전캠프_21일차] 나의 관심 분야 서비스 만들기 (3) 오늘은 서비스 구축을 위한 상세 내용 정리 및 와이어프레임을 만들어보았다.사실 순서가 맞는지도 모르겠고, 리서치같은 내용들은 다 빠져버렸지만일단은 그냥 해보기로 했다.  당근처럼 약간 동네 커뮤니티 같은 느낌으로 되길 바라면서이름은 우리 동네 멍멍이들, 우멍이라고 지었다.옆집 바둑이, 지나가는 똥강아지, 산책하는 복슬이 ...그냥 간단하게 줄였을 때 괜찮은 거 같아서 막 지었다. 우리집 멍멍이를 캐릭터로 만들고 싶어서 일단 저렇게 스케치도 해봤는데,대충 그린 저 멍멍이도 나름 괜찮은 거 같아서내일 다듬어보다가 영 아니다 싶음 왼쪽 멍멍이로 그냥 할 것 같다.   전체적으로 펫피랑 피리부는강아지 앱의 화면을 보고서괜찮은 요소 요소들을 따와서 재조합 해보았다.최대한 간단하게 쉽고, 가볍게 만드는게 목표다. .. 2024. 5. 23.
[UX/UI 사전캠프_21일차] 나의 관심 분야 서비스 만들기 (2) 어제 관심있는 서비스를 라이프스타일로 정하고, 그 안에서도 좀 더 세부적으로 '반려동물' 앱을 분석해보았다.  서비스 분야 : 라이프스타일 / 반려동물 - 쇼핑 : 사료, 간식, 용품 - 건강 : 병원 예약, 가격비교, 건강관리, 약국 위치 - 케어 : 미용, 훈련, 펫시터 - 여행 : 반려동물동반펜션, 여행지, 펫택시 - 입양 : 유기견 보호소- 기록 : 일지, 건강수첩, 산책 - 커뮤니티 : 정보공유앱 스토어에서 반려동물 키워드로 검색해보니 위와 같은 카테고리로 나눌 수 있었고,이 중에서 '강아지 산책' 앱 서비스를 만들기로 정하였다.  평소 강아지랑 산책하면서 많은 강아지들을 보게 된다. 자주 보는 강아지들은 어떤 강아지일까 이름도 궁금하고, 또래 견주라면 정보 공유도 하고 싶었다. 하지만 내향인으.. 2024. 5. 22.
[UX/UI 사전캠프_20일차] 나의 관심 분야 서비스 만들기 (1) 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기 1. 현재 웹/앱에는 어떤 서비스들이 있는지 살펴봅시다. a. 내가 자주 사용하는 웹/앱 카카오톡, 네이버, 삼성페이, 토스, 스타벅스, 네이버웹툰, 유튜브, 인스타그램, Foodie 네이버지도, 카카오버스, 카카오지하철, 배달의민족, 당근, 티빙, 쿠팡, 어바웃펫, 멍냥보감 b. 관심 있는 웹/앱 당근, 티빙, 네이버 VIBE, Foodie, 멍냥보감 c. 내가 가고 싶은 기업에서 운영하고 있는 서비스 종류 네이버 > 네이버 웹툰, 네이버 지도, 시리즈온, 파파고, 클로바노트, MYBOX 카카오 > 카카오톡, 카카오뱅크, 카카오맵, 다음, 카카오뮤직, 브런치스토리, 티스토리 2. 서비스 별 주요 목적, 기능을 조사하여 정리해봅시다. a. 당근 : 소셜 b.. 2024. 5. 21.
[UX/UI 사전캠프_19일차] 휴리스틱 평가 UXUI 아티클 / 책 스터디휴리스틱 평가로 내 ux ui가 좋은지 확인하기 휴리스틱 평가란? 스스로 UX/UI 디자인을 평가하는 방법 - 제품이 사용자의 인지적 오류를 줄여줄 수 있는 방향으로 디자인 되었는지? - 유용한 정보를 포함하며 사용자가 제품 이용 과정에서 정서적 만족을 느끼는지?  * 휴리스틱 = 그리스어로 ‘발견하다’라는 의미닐슨 노먼 그룹의 10가지 휴리스틱 평가1. Visibility of System Status 시스템 상태를 눈에 보이게 표현하기 : 진행중인 정보를 지속적으로 제공한다.  2. Match between System and the Real World 시스템과 현실 세계를 연결하기 : 일상 그대로 사실에 가깝게 표현한다.   3. User Control and Freed.. 2024. 5. 20.
[UX/UI 사전캠프_18일차] 앱 서비스 회원가입 프로세스 분석 및 개선 자주 사용하는 앱 서비스 회원가입 프로세스 분석 및 개선 1. 앱 서비스 선정서비스 이름 : 멜론 티켓선정 이유 : 클론 디자인을 하면서 앱을 분석해봤기 때문에 연장선으로 진행서비스 소개 : 콘서트부터 뮤지컬, 전시까지 다양한 장르의 공연을 탐색하고, 쉽고 빠르게 예매2. UI/UX 디자인 분석회원가입 제공 시점 : 공연 및 전시의 상세 내용은 회원가입하지 않은 상태에서도 확인 가능하다. 랭킹, 이벤트, 티켓 오픈 소식 등 앱의 모든 카테고리에 접근이 가능하다.예매하기(회차가 없는 경우) or 회차선택 버튼을 눌렀을 때 회원가입을 제공한다.회원가입 프로세스 - 플로우차트화면별 구성카카오 계정 회원가입서비스 약관에는 라디오 버튼인줄 알았지만, 동그란 체크 박스가 있다.메일, 비밀번호 등록에는 텍스트 필드가.. 2024. 5. 17.
[UX/UI 사전캠프_17일차] 앱 클론 디자인 앱 클론 디자인클론 디자인할 앱 선정 : 멜론티켓 선정한 앱의 간단한 설명 분야 : 엔터테인먼트 핵심 서비스 : 공연, 전시 예매 - 콘서트, 뮤지컬/연극, 클래식, 전시/행사 티켓 예매 주요 기능 : 공연 예매 공연 탐색 모바일 티켓 공연 플래너 맞춤 공연 추천 유저 플로우 클론 디자인 진행 - 메인화면 - 핵심 서비스 - 나머지 모든 서비스 - 프로토타입 재생 2024. 5. 16.
[UX/UI 사전캠프_16일차] 쿠팡의 다크패턴 논란 UXUI 아티클 / 책 스터디“결국 터질 게 터졌다” UI·UX 디자인 관점으로 본 쿠팡의 다크패턴 논란  최근 쿠팡이 멤버십 가격 인상으로 고객이 탈퇴하고 있는데, 적절한 가입 해지 안내가 이루어지지 않아 공정위 조사가 시작되었다. 쿠팡은 국내 다크패턴 디자인의 대표 예시라 불릴 정도로 문제가 많았다.  다크패턴이란? - 해리 브링널이 ‘소비자를 기만하거나 속이는 유형의 디자인’을 모아 정립한 UI·UX 디자인 - 사용자를 속여서 행동을 유도하기 위해 세심하게 만들어진 UI - 사업자가 소비자의 착각과 부주의를 유발해 불필요한 지출을 요구하는 행위 또는 디자인 -공정위, 20241. 방해형 다크패턴 : 사용자의 과업 달성을 노골적으로 방해하고, 피로감을 유발해 선택을 포기하도록 유도하는 디자인  - 쿠.. 2024. 5. 14.
[UX/UI 사전캠프_15일차] 눌러보고 싶은 동그란 버튼 UXUI 아티클 / 책 스터디눌러보고 싶은 동그란 버튼 프리즘 앱의 메인 배너 영역의 개선 사례 - 카테고리가 많아지면서 배너를 변경 - 프로필 디자인의 메타포인 원형으로 결정 - 주목도를 높이기 위해 트렌지션으로 엣지 포인트를 줌 - 텍스트를 최소화 하기 위해 슬라이드 에니메이션 방법 활용 - 런칭 후 천체 CTR이 5배 높아짐 접근성과 심미성을 놓치지 않으면서도 비즈니스 목표에 부합해 지표도 성장한 좋은 사례 더 깊고, 넓은 관점으로 시각화를 고민 디자이너만의 다양한 아이디어와 표현 스킬을 통해 사용자에게 유용성, 만족감, 엣지 포인트까지 만들어 낼 수 있다. 좋았던 점 : 문제 상황과 해결하는 과정, 결과물까지 UI 과정을 알 수 있어서 좋았다. 아쉬운 점 : 좀 더 자세한 과정이 있어도 좋았을 것.. 2024. 5. 13.