라우드소싱 지원작 - 코맥스 월패드 UI 디자인

 

 

 

오늘은 3주 넘게 진행했었던 라우드 소싱 공모전

지원작을 소개해보려고 한다.

 

솔직히 3주 했다고 하기에는 중간에 놀기도 하고

대충한 경향이 좀 있어서..ㅋ 실제 작업일은

2주쯤 되는 것 같다.

 

 

어쨌든... 오늘은 난생 처음 지원한 공모전 후기와

프로젝트 스케쥴 및 회고를 적어보려 한다.

 

---

 

1️⃣  코맥스에서 원하는 디자인 스타일 정의하기

 

우선적으로 한 일은 코맥스가 올린 참고자료를 꼼꼼하게 살펴보고 키워드를 추출해내는 것이었다. 코맥스는 어떤 곳이고, 무엇을 위해 의뢰했는지, 어떤 디자인스타일을 좋아하는지 피그마에 정리해놨다. 코맥스는 레퍼런스 링크를 정말 많이 올려줘서 하나하나 다 보면서 포인트가 될 부분을 따로 캡쳐해서 올려두고 키워드를 몇 개 뽑아냈다.

 

 

그러고 나서 최종 컨셉을 도출해냈다. 와이어프레임을 짜야하기 때문에 일단은 러프하게 정리해둔 상태이다. 그래도 어떤 느낌인지는 대강 확정을 해 놓은 상태라서 와이어프레임 구축할 때에도 이 컨셉을 생각하면서 작업할 수 있었다.

 

---

 

2️⃣  Home Wireframe 작업하기

 

컨셉을 다 정리하고 나서 다음날부터는 홈화면 와이어프레임을 설계하기 시작했다. 홈화면에 들어갈 수 있는 내용은 총 11가지였는데, 이게 모두 다 들어갈 필요도 없고 들어갈 수도 없어서 내가 직접 정보의 위계를 정해야 했다. 우선 사람들이 흔하게 많이 보는 날씨와 시간, 공기나 온도 등의 정보, 에너지 사용량 정도를 상단에 배치하고, 2-3순위도 매겨 놓았다. 근데 와이어프레임 짜면서 1순위 제외하고 좀 바뀜..)

 

 

아무래도 홈 와이어프레임은 중요하니까... 이것만 한 일주일 한듯 ㅠ 고민을 굉장히 많이 했다. 계속 와프 작업만 하다보면 뭐가 중요한 지 핵심을 놓치는 경우가 있어서, 나는 중간에 뭐가 중요했고, 어떤 것을 꼭 가지고 가야하는지 다시 한 번 정리하는 시간을 가졌다. 결과적으로는 총 24가지의 와프 중 두 가지 버전의 최종 와프가 나왔다.

 

---

 

2️⃣  제어 & 제어 상세 Wireframe 작업하기

 

두 번째는 IoT 제어 화면을 했다. 여러 자잘한 기능들이 꽤 많아서 어떻게 설계를 해야할 지 고민이 많았는데 그래도 홈 와프보다는 꽤나 빠르게 나왔당. 근데 이 부분은 IoT 아이콘이 많이 들어가는 부분이라 아이콘도 같이 몇 개 제작해놓았다.

 

 

제어 화면과 함께 제어상세 페이지도 작업했다. 여기는 정말X100 고민이 많았는데 마땅히 더 나은 방안이 없었다ㅠ 제일 아쉬운 와이어프레임...이지만 최선이었다구.. 나름 바텀 시트 사용해서 유저가 좀더 넓은 화면이지만 제어페이지와는 차별화된 경험을 할 수 있도록 했다. 아님 말고..ㅋ

 

 

---

 

3️⃣  Icon 제작하기

 

아이콘은 사실 홈 UI 디자인 들어갈 때 동시에 작업하기 시작했다. 앱스, 날짜, IoT 아이콘 모두 내가 제작했다. 아이콘 제작할 때 연정's Figma의 아이콘 제작 방법 유튜브를 참고했다. 아이콘 만드는 거 은근 재밌었다.

 

갓연정님... 👍

#2 피그마로 아이콘 제작 Tip (feat. Shape Booleans 기능)

 

 

---

 

4️⃣  Home UI Design

 

Color Test라 적어놓고 싹다 해버리기 ㅋ 찐P는 과정의 체계따위 없다... 색감도 두가지 버전으로 제작했었는데, 라이트 모드는 너무 토스같기도 하고 코맥스 제품이랑 안 어울려서 다크 모드 너낌으로 가기로 했다.

 

---

 

4️⃣  제어 & 제어 상세 UI Design

 

제어페이지 작업 때에는 라이트모드로 제작했던 아이콘을 다시 만들어야 했다. 라이트 모드에는 되게 예뻤었는데 다크모드에 적용하니 갑자기 애매해져서 좀 고생했다 ㅠ 그리고 제어 상세 페이지까지~ 상세페이지는 곰방했당.

 

---

 

5️⃣  APPS UI Design

 

사실 하나의 페이지가 더 있다. APPS는 그래도 아이콘만 있으면 대강 끝나서 와이어프레임은 자연스럽게 생략했다..ㅎ (이래도 되나?) 아휴 누가 만들었는지 아이콘 촤아암 예쁘다~

 

---

 

6️⃣  디테일 잡기 & 디자인 시스템 만들기

 

마지막은 디자인 디테일 잡고 디자인 시스템까지 만들었... 만들다 말았다 ㅎ 1등하면 만들게여~ㅎ

 

---

 

🚀  최종본

 

디자인만 다 하면 됐지 상세페이지에 썸네일까지 제작하라는 라우드소싱,,,, 나는 또 일을 미루지 않으면 죽는 병에 걸렸기 때문에 새벽까지 상세페이지 작업하다가 힘들어 뒤질뻔 했다. 그래도 뭐.. 만들어 놓으니까 볼만은 하다 ㅎ

 

---

 

✍️  라우드소싱 지원 후기

우선 UI 포폴이 너무 없어서 그것도 만들겸, 1등 300만원에 눈이 돌아가서 지원하게 됐다. 아이콘도 만들어보고, 내 역량의 한계도 느껴보는 시간이었다. 아직 부족하지만 간단한 포폴에 쓸만한 작업 하나가 생겨서 좋고, 3등만 해도 너무 좋겠다 🥺 나 포함 총 13명이나 지원해서 내 생각엔 어떤 괴물같은 디자이너가 1-2등 가져갈 것 같다. 제발 3등이라도 하게 해주세여,,

 

방학 때 시간 좀 남는다면 공부 삼아 라우드소싱 지원해보는 것도 좋을 것 같다! 근데 내 친구는 20번 중에 딱 1번 선정됐다고 한다... 선정되는 건 좀 어려울 것 같긴 함. 그래도 나는 앞으로 2개 정도 방학 중에 더 해보려고 한다. (개강까지 3주 남음)

 

 

그럼 20000