# Rabang

## 개요

소셜 커머스 라이브 쇼핑을 위한 앱입니다.&#x20;

UX 적인 측면에서 기획안을 수정했으며, UI 디자인을 맡아 진행했습니다.&#x20;

각 페이지를 모두 HTML과 CSS를 사용하여 하드코딩 방식으로 퍼블리싱하였습니다.

## 세부 내용

* 기간 : 2021.03 - 2021.05
* 스타일 가이드 정의
* 구체적인 기획안 작성 및 와이어프레임 제작
* UX/UI 디자인
* 하드코딩을 통한 퍼블리싱

## 담당 파트

### 로고의 특징에 맞춘 디자인 제안

귀여운 느낌의 로고 형태를 위하여 동글동글한 형태로 디자인하였습니다.

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FoXUddbu3wttknXctZ8YK%2Fimage.png?alt=media\&token=809baa6e-ba99-4051-b5e1-a4561733b772)

### 달성 목표 디자인

공동 구매형식의 구매방식을 위해 목표 달성치를 다양한 색으로 디자인하여 차가움에서 뜨거움으로 넘어가는 모습을 표현했습니다.

또한, 소셜 커머스 쇼핑이라는 특징을 살리기 위해 채팅창과 그 위에 해당 판매 품목을 함께 디자인하습니다.

장바구니를 클릭하면 화면 밖으로 나가는 것이 아니라 해당 화면 내에서 담을 수 있으며, 다양한 상품을 함께 구매할 수 있습니다.

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2Fbn2DqRNoghNRSNUdIrXY%2Fimage.png?alt=media\&token=c051b54c-79f9-4a26-b968-2dbb356a4c2c)![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FpjomFZGwpgU4z5oGTd26%2Fimage.png?alt=media\&token=3f735dd0-597f-45da-a4b0-2cdc965df152)![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2F6YaVGi6JMQELAlh9xaiq%2Fimage.png?alt=media\&token=3681e59d-6544-4306-8df5-1ab9eebb6fdb)

### 구매부터 내역확인까지

장바구니 구매 버튼을 클릭한 후, 주문/결제 페이지로 넘어오며 국외 쇼핑을 목적으로 한 앱이기 때문에 카드 결제 외에는 선택되지 않게 하였습니다.

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FBxeYHw9Me9QlmdAe1anu%2Fimage.png?alt=media\&token=5e6bcbff-9826-4698-ba90-4dfbff95de07)

## 어려웠던 점

기획안 없이 진행해야 했던 디자인이어서 기초들을 잡기에 어려움을 겪었습니다.&#x20;

새로운 페이지를 제작할 때마다 하나하나 물어보면서 작업해야 했기 때문에 진행 속도가 더뎌졌습니다.

## 정리

아쉽게도 앱 자체가 완성되진 못했지만 소셜 커머스라는 분야에 대해서 더 공부할 좋은 기회가 되었습니다.&#x20;

앞으로 커머스와 관련된 앱을 디자인할 기회가 생기게 된다면 'Rabang'보다 더 탄탄한 기획안을 토대로 디자인하고 싶습니다.
