E민

*뱅크샐러드의 회원가입/로그인 과정에서 휴대폰 본인인증 화면에 대한 QA를 한다고 가정 1. 테스트케이스 작성하기 테스트 케이스(TC) - 특정 조건에서 요구 사항을 충족하는지 확인하기 위해 모든 케이스를 작성하는 문서 - 특정 조건 아래의 환경을 테스트하는 것이기 때문에 특정 조건, 테스트 범위, 케이스, 기댓값, 테스트 환경 등을 상세히 기입해야 함 화면 조건 테스트 케이스 입력값 기댓값 테스트 환경 일반 회원가입/로그인 정상 모든 텍스트 필드에 정상 값 입력 이름 : 일이삼 주민등록번호 : 123456-7****** 휴대폰번호 : 010-1234-5678 통신사 : SKT 인증요청 화면으로 이동 iOS/Android 일반 회원가입/로그인 에러 형식에 맞지 않은 이름 입력 이름 : 사오육 '정보를 확..

1단계 공감하기 _ 공감지도 (Empathy Map) 2단계 문제 정의하기 _ 5 whys 3단계 아이디어 도출하기 _ SCAMPER 위의 방법론을 사용. 1단계 공감하기 : 공감지도 활용 (Empathy Map) - 공감지도 : 사용자가 되어 4분면에 생각과 느낌, 말과 행동, 보는 것, 듣는 것을 정리한 후 사용자가 겪을 패인 포인트와 니즈를 유추 (감정, 생각, 행동, 경험) 1. 사용자의 느낌 1) 호기심과 기대감 : 새로운 여행 및 할인에 대한 정보 2) 앱의 불편함 : 검색 과정이 심플하진 않음, 결제 과정이 번거로움 2. 사용자의 생각 1) 여행지 고민 : 어디로 여행 갈지에 대한 고민 2) 날짜마다 다른 항공권 가격 : 가격 비교를 원함 3. 사용자의 행동 1) 검색 : 여행지, 숙소, 렌..

티맵 앱 스크린 샷 눈에 띄는 요소 검색어 칩 구글 메테리얼 가이드) 수평으로 스크롤 가능해야 함 = 0단일 칩이 아닌 세트로 나타내야 함 = 0칩과 주소검색이 동일한 라인에 있어서 가로 스크롤시 터치 영역이 겹치는 아쉬움이 있다 긴급출동 FAB 구글 메테리얼 가이드)FAB 앞에 배지나 다른 요소를 올리지 않기= 0FAB 컨테이너 색상이 뒤 영역과 대조 확인 = 0화면의 주요 동작을 나타내야 함 = 0하지만 긴급출동 텍스트가 줄바꿈되는 문제 .. 아쉽다!

기존 크림은 이메일로 가입, 네이버로 로그인, 애플로 로그인 세 가지의 로그인 방법을 갖는다. 하지만 요즘은 흔히 '카카오 계정으로 로그인' 하는 방법을 사용한다. 카카오 계정이 없는 스마트폰 유저가 거의 없기도 하고, 카카오 계정으로 로그인하는 방법이 가장 간단하기도 하다. 그래서 크림 로그인 방법에 '카카오 계정으로 로그인'하는 방법을 추가해봤다. 기존 방법에 '카카오로 로그인' 버튼을 더하여 화면을 구성했고 카카오 로그인을 하면 카카오 계정 연동 화면이 나오도록 플로우를 구성했다. 로그인창 수정 2차!! // 마지막 화면까지 제작 끝 // 요즘에는 간편 로그인 창이 없는 웹/앱이 드문데.. 카카오에는 배송지와 같은 주소도 이미 등록되어 있는 경우가 많아서 따로 사이트에서 배송지를 입력하는 번거로움도..

넷플릭스 앱에 이어 크림 웹 클론 디자인을 해봤는데,, 앱보다는 웹이 더 손이 많이 가는 것 같기도 .. ? 아래에는 크림 메인 화면에서 볼 수 있는 추천, 랭킹, 럭셔리 페이지 클론 부분 // 여기는 로그인 화면 클론 // 플로우대로 디자인해보았는데 의아한 부분을 발견했다! 이메일 아이디 찾기에는 높임말이 없는 반면 비밀번호 찾기 부분에는 높임말이 있다 ..? 왜징???? 우여곡절 끝에 크림 웹 클론 디자인까지 마무리 >>>

NETFLIX 지난번 넷플릭스 웹의 UI 분석에 이어 넷플릭스 앱을 클론 디자인해보았다!! UI 분석은 웹을 했지만 .. 앱 클론을 할 예정 // 일단 넷플릭스 웹 페이지의 유저 플로우를 제작해봤는데, 계정을 선택한 후 메인 화면에서 아래로 스크롤하여 콘텐츠를 고르거나 GNB 바에서 카테고리를 선택 후 콘텐츠를 고르는 흐름이 나타난다. 지난번에 GNB에서 LNB가 바로 보이지 않는 점을 아쉽다고 이야기한 바 있는데, 지금 생각해 보니 메인 화면에서 시리즈, 영화 등의 카테고리를 눌러서 페이지가 전환될 때마다 전환된 페이지에서는 다양한 콘텐츠들이 쏟아져나온다. 따라서 LNB 메인 화면에서 나오지 않는 이유는 더 많은(?) 콘텐츠를 보여주기 위한 전략이 아닐까 싶기도 하다.. (주관ㅎ.ㅎ) 넷플릭스 앱 클론..

피그마가 지원하는 플러그인을 사용하면 포트폴리오 템플릿을 쉽게 제작할 수 있다. 1. 포트폴리오에 본인이 진행했던 프로젝트를 목업으로 보여주는 경우 목업 사이트를 찾지 않고 "Mockup" 플러그인으로 간편하게 제작할 수 있다. 플러그인을 실행한 후 본인이 원하는 목업 이미지를 선택하여 프레임을 추가하면 쉽고 빠르게 목업을 제작할 수 있다. 2. 더미 이미지가 필요한 경우 "Unsplash" 플러그인을 사용하면 빠르게 이미지를 불러올 수 있다. 원하는 주제의 이미지를 Unsplash에서 검색 후 클릭하면 더미 이미지를 바로 추가할 수 있다. 3. 와이어 프레임을 사용하는 경우 "Wireframe Designer" 플러그인을 이용하여 간단한 와이어 프레임 제작이 가능하다. 플러그인을 실행 후 본인이 사용하..

피그마는 프로토타입 기능을 제공한다. 프로토 타입이란, 화면의 순서 또는 플로우를 연결시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것이다. 피그마의 프로토타입 구성요소로는 1. 핫스팟(Hot Spot) : 파란색 기준이 되는 점, 인터랙션이 시작하는 위치 2. 커넥션(connection) 라인 : 핫스팟과 이어지는 두 개의 요소 사이의 연결 선 3. 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소 프로토타입의 인터랙션 디테일창으로 세부적인 설정이 가능한데 디테일 창 (핫스팟에서 데스티네이션 요소를 클릭하면 뜨는 창) 1. 트리거(Trigger) : 이벤트라고 볼 수 있는 인터랙션의 시발점 ex) cli..