1. 컨셉 정하기
레퍼런스 사이트를 찾아보다 sweetgreen의 앱을 보게 되었다. 미국에서 샐러드들 파는 회사인데 맘에 들어서 컨셉으로 잡게 되었다. 이번 주제가 식료품 및 생필품을 구매할 수 있는 가상의 커머스 앱이고 요즘 트렌드가 지속가능성, 친환경이다 보니 딱 알맞는거 같았다.
2. 와이어프레임
색상과,폰트를 정하기 전에 어떤식으로 만들건지 구상을 하는게 더 좋을거 같아서 먼저 만들기 시작하였다. 컨셉을 잡고 어떤식으로 화면을 구성할건지 마켓컬리,이마트몰,홈플러스,우리의식탁 4가지의 앱을 참고하였다.
- 만들어야 하는 화면 3가지
- 홈 화면
- 상품 목록(리스트) 화면
- 상품 상세화면 + 장바구니 바로가기 다이얼로그
각 화면에 들어가야할 요소들
✅ 뒤로가기와 현재 화면 제목
✅ 유제품, 육류, 과일류 등이 있는 카테고리 목록
✅ 스파르타우유를 포함해서 최소 10개 상품이 2열로 배치
✅ 상품별 대표 이미지, 상품 이름, 상품 가격
✅ 우유 1개 또는 2개를 선택할 수 있는 라디오를 만들어 주세요.
✅ 화면의 하단에 고정된 장바구니에 담기 버튼과 구매하기 버튼을 만들어 주세요
3. 색상 / 폰트 정하기
- 색상 스타일은 3종류 이상 활용해주시고 색상 팔레트를 만들어주세요.
- 폰트 스타일은 제목과 본문 각각 1가지 이상(총 2 가지 이상) 활용해 주세요.
색상은 coolors 플러그인을 사용하여 선택을 하였다. 친환경 건강한 이미지가 연상되는 초록색을 기준으로 선택을 하였다.
총 4가지의 색으로 구성하였다. ( 혹시나 맘에 안들면 수정할 계획 )
폰트는 Heading Title Body 3가지로 나눠서 크기와 행간등등 설정을 해주었다.
₊·*◟(˶╹̆ꇴ╹̆˵)◜‧*･