라우드소싱 지원작 - 스페이스그린 WEB UI 디자인

 

벌써 네번째 돈내놔 시리즈..

(돈내놔 시리즈 = 라우드소싱 공모전)

 

하도 공모전에 집착하는 날 보며 어무니는 돈에

미쳤다고 하고 남자친구는 그거 중독이라고 한다.

 

공모전에 미친 나

 

평생 쌔빠지게 일해서 한 '달'에 번 돈 80이

최대였는데, 3일 디자인해서 번돈 90만원..

 

이거 뭐 안할수가 없지 않은감 ^^

2학기 끝날 때까지 1000만원 가자~!

 

---

 

1️⃣  '스페이스그린' 회사 리서치 및 니즈 파악

 

이제 점점 공모전 작업 과정이 거의 자동화 시스템으로 굴러간다. 처음 시작할 땐 무조건 데스크 리서치 및 기획안 분석, 디자인 스타일 파악! 사실 이 부분이 외주에선 정말X1000 중요한 부분이다. 클라이언트가 원하는 방향성에서 벗어나면 아무리 기깔나게 잘해도 무조건 떨어진다.

 

+) 웹페이지 디자인은 처음인지라,,

 

웹디자인은 사실상 처음이라서 그리드부터 조사에 들어갔다. 추후에 수상한다면 반응형으로도 만들어야 하기 때문에 그 부분도 미리 염두에 두어야 했다. 웹디자인은 내 기준 앱디자인보다 어렵다고 느꼈기 때문에 이걸 해말아 고민이 많았는데, 막상 해보고 나니 별거 아니었다.

 

2️⃣  레퍼런스... 또퍼런스

 

레퍼런스는 많이 찾으면 좋다는 점! 하지만 이번엔 참고할만한 웹사이트가 별로 없어서 특정 사이트를 딥하게 분석했다. 분석한 웹은 총 4가지로 마켓컬리, 라우드소싱, 텀블벅, 와디즈였다. 클라이언트가 가져온 레퍼런스이기도 해서 디테일 파악 후 키워드를 뽑아냈다.

 

키워드 : 심플세련 / 트렌디 / MZ세대 / 스타트업

 

그리고 이 키워드에 적합하려면 어떤 디자인 요소를 써야할 지도 고민했다.

 

#기본 그래픽 요소 #디테일 중요 #토스 아이콘 #상품 이미지가 큰편 #정돈된 레이아웃

 

요정도로 정리하고 나서 와이어프레임에 들어간다.

 

3️⃣  와이어프레임 작업

 

이전에 작업했던 방식과 조금 달랐던 것은 와프가 딱 하나밖에 안나왔다는 것이다. 이전 레퍼런스를 보고 어느정도 정형화된 디자인이 좋겠다고 판단하여 레이아웃에 맞춰 진행하다보니 경우의 수가 많지 않았다. 내가 아직 부족해서 그런 거일수도 있겠지만 스스로 만족할만한 디자인이 금방 나왔기 때문에 이대로 진행하게 됐다. 또 와프에서부터 컴포넌트를 만들어서 나중에 디자인 수정 시 공수가 많이 들어가지 않도록 했다. 컴포넌트 만드는 게 귀찮아서 원래 안했었는데.. 만들고 보니 편하고 좋았당 (당연히 해야하는 걸 안한거임,,)

 

4️⃣  UI 디자인 입히기

 

콘텐츠가 많은 서비스의 경우 내가 직접 안에 들어갈 사진이나 텍스트를 가져와야해서 시간이 2배는 걸리는 것 같다. ㅠㅠ 어찌저찌.. 잘 가져와서 마무리했다. 컴포넌트 만들고 색깔 선정하는 것 말고는 수월하게 진행한 듯

 

 

로그인 및 회원가입 페이지는 보통의 웹페이지와 똑같은 디자인으로 진행했다. 웹페이지에서의 로그인/회원가입 화면도 되게 다양한데 이 때 제출까지 시간이 얼마 안남았어서 찾아볼 겨를이 없었다.

 

+) 열심히 만들어 둔 컴포넌트

 

정돈이 필요한 상태이다. 컴포넌트 만들어두고 나니까 얼마나 편하던지ㅠㅠㅠ 귀찮다고 안 만들었던 과거의 나자신. ^^

 

---

 

🚀  최종본

---

 

아주 무난~한 디자인같다. 외주 하면 UI 실력이 느는 것 같다가도 내 색깔이 담기지 않아서 좀 아쉽기도 하다. 예전에 했던 오너쉽 앱디자인은 내 색깔이 담기기도 하고 흔한 UI 설계를 하지 않았어서 갠적으로 마음에 드는 작업물인데 클라이언트가 원하는 방향이랑 달라서 아쉽게 탈락했었다. 라우드소싱은 돈이 목적이며 UI 디자인 경험과 실력은 부수적으로 생각하기로 했다. 어떤 것이든 목적과 방향을 확실히 설정해두고 해야 시간 낭비도 안 되고 효율을 얻을 수 있는 것 같다. 그러니까 라우드소싱은 내 돈줄임

 

 

+) KPT 회고