TIL (Today I learned)
오늘 나는 무엇을 했나요
- 카타 ( 프로덕트 분석)
- 개인 과제 ( 커머스 앱 )
오늘은 어떤 것을 배웠나요
1. 카타 ( 프로덕트 분석)
1. 디스코드
상대방에게 전화를 거는 기능도 있지만, 기존의 만든 방에 쉽게 들어가 통화및 화면공유를 할 수있고
왼쪽패널에 내가 들어가 있는 방들이 스크롤형식으로 볼 수 있어서 쉽게 방을 찾고 들어갈수있어서
채팅창도 왼쪽 오른쪽으로 드래그해서 쉽게 옆으로 빼놓거나 가져올수있어서 편하다고 생각하였음
2.토스
국민이 주거래 은행이라 쓰는김에 계속 사용하여 토스는 친구가 토스로 보내달라할떄 가끔 쓰지만
돈을 보낼때는 토스가 가장 간편하고 좋은것 같다고 생각함 토스는 계좌와 연락처를 맨 상단에 배치하여 쉽게 전환
할수있고 계좌번호를 입력하거나 옆에 카메라 아이콘으로 한번에 이게 사진을 찍어서 번호를 적을수있다는것을
알수있고 그아래는 내계좌가 있어서 클릭하면 볼수있지만 돈을 보낼때는 보통 내계좌말고 다른사람에게
보내니깐 디폴트가 닫혀있고 클릭해야 나오는것이 좋은것같고 그아래 최근보낸계좌를 나열해줘서 같은사람에게
보낼때 바로 클릭하면 돼니깐 좋다고 생각하였음
3.오늘의 집
의자를 살때 사용자들이 가장 필요하다고 생각하는 팔걸이유무나 색상 소재같은 옵션들을 먼저 보여주고 더 세세한 옵션은 필터를 통해
제공하는점이 좋은것 같고, 소재도 대중적인 소재를 맨앞에 원목 철재스틸같이 대중적인 소재를 배치하고
그뒤에는 다양한 소재를 배치하여 사람들에게 편리함을 준다고 생각하였음
2. 개인 과제 (커머스 앱 )
개인과제 D-2
1.오늘은 저번에 만들어놓은 디자인가이드(컬러스타일, 폰트스타일, 아이콘, 컴포넌트), 와이어프레임으로 화면을
설계하고 프로토타입을 만들었다.
홈화면 -> 목록화면 -> 상세화면 & 상세화면(품절) 을 설계하였고 프로토타입을 연결하였다.
마진값
화면프레임의 좌우 마진값은 전부 10으로 통일하였다.
각 다른 프레임의 사이값은 20을 기본으로 하였고 조금 더 분리감을 주고싶으면 4배수를 기준으로 올렸다.
한 묶음으로 프레임을 보여주고싶은건 사이값을 8으로 하였고 이것또한 위에처럼 4배수를 기준으로 올리거나 내렸다.
1.홈화면
배너는 여러개의 사진을 한 오토레이아웃으로 묶어 스크롤이 되도록 만들었다.
제품리스트는 컴포넌트를 만들어 각 아이콘과 텍스트에 프로퍼티를 적용한후 나온 제품리스트 한칸을 여러개 복사를 한 후 그것을 네스티드 인스턴스화 하여 한번에 수정하기 쉽도록 만든후 스크롤이 되도록 만들었다.
2.목록화면
목록 제품리스트는 홈화면 제품리스트와 같은 방식으로 컴포넌트를 네스티드 인스턴스하여 제작하였다.
3. 상세화면
상세화면은 컴포넌트로 만든 버튼과 라디오 버튼을 사용하여 한번에 하나만 선택되도록 하였고,
구매버튼과 다이얼로그 컴포넌트로 장바구니담기를 누를시 나올 다이얼로그를 만들었다.
4. 상세화면(품절)
상세화면(품절)은 상세화면을 가지고와 이미지위에 라이트박스(일시품절)을 올려놓아 한번에 사용자에게 품절인것을 나타냈고, 그아래 선택옵션을 비활성화하여 클릭이 안된다는걸 알려주며 재입고알림받기 버튼으로 수정 하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 라디오 프로토타입 문제를 겪었음. 라디오가 비활성일때 클릭이 안되게 하는것을 못하여 오늘은 일단 새롭게
컴포넌트를 사용하지 않고 프레임을 따로 만들어서 디자인 하였다. 라디오를 프로토타입으로 작동시키는 방법을 복습을 다시 해야함
저번에 버튼 컴포넌트와 폰트스타일을 만들었지만 디자인을 하다보면 볼땐 몰랐던 필요한 버튼과 폰트가
몇개씩 나왔다. 그래서 따로 중간에 폰트와 버튼컴포넌트를 만들게되었다.
내가 만들 앱이 무슨 성질을 가졌는지 무슨 이유로 버튼과 폰트스타일을 정하였는지 항상 생각하면서 디자인을 해야함