개요
사실 난 지금까지 뼈속까지 효율만을 추구하는 백엔드 개발자였고, 유저 인터페이스는 CLI면 충분하다고 생각해왔기 때문에 이번 프로젝트를 통해 여러 시행착오를 거치며 그래도 봐줄만한 디자인을 완성하게 되었다.
그래서 이번 글에서는 디자인 도중의 여러 시행착오 중 친구들과 구글신님의 조언을 통해 알 수 있었던 몇몇 정보들을 공유해보려고 한다.
아참 그리고 디자인 툴은 Figma를 이용하기로 했다.
시작
웹 디자인을 할 때 제일 먼저 해야할 것은 무엇일까? 디자인을 하는 친구의 조언을 구한 결과, 내가 이해한 바로는 우선적으로 컨셉과 주된 색을 고르는 것이였다.
컨셉은 이름에서 따왔는데, 모의고사 + 아카이브 = 모카이브라는 이름에서 커피의 이름은 "모카"가 연상되어서 깔끔?하면서 따스한 느낌으로 정했고, 로고를 커피 머그잔으로 결정했다.
그 다음은 주된 색을 고르는 것였지만, 계속되는 시도 끝에 나는 "괜찮은" 색을 고르는 것에 소질이 없음을 깨닫고 알맞는 색의 쌍을 무작위로 골라주는 웹사이트를 이용했다.
컴포넌트 만들기
요즘 프론트엔드 개발은 정말 복잡하다는 생각이 들었는데, 나와 같은 생각을 한 나보다 더 똑똑한 사람들이 이런 문제를 해결하려 새로운 아키텍처를 만들어냈다.
최근(이라고 해도 사실 좀 오래됐기는 했다) 프론트엔드 개발의 대세는 컴포넌트 기반 아키텍처라고 할 수 있는데, 이는 코드를 캡슐화해 재사용 가능하게 만든 컴포넌트를 이용해 페이지를 구성하는 기술이다.
이에 따라 나 또한 컴포넌트를 먼저 디자인한 후 이를 구성해 하나의 페이지를 만들기로 했고, 다음은 그 모의고사 컴포넌트의 시행착오들이다.
이러한 컴포넌트들을 만들어보면서 깨달은 것이 몇가지 있었는데, 그중 가장 중요한 것 두가지는 적당한 간격과 크기, 분위기의 조화였다.
초기 시행착오부터 아래로 내려올 때 변경사항의 공통점도 그 두가지인데, 점점 주변과 튀지 않는 색을 선택하고, 적당한 간격과 크기로 글씨 등을 바꾸는 등의 과정이 보일 것이다.
페이지 디자인
말했다싶이 위에서 만든 모의고사 컴포넌트와 글에서는 다루지 않았던 여러 컴포넌트들을 이용해 페이지를 디자인하고, 색, 마진 값, 사용된 에셋(svg, png 등등)을 개발자에게 넘겨주면 디자인은 일단 끝나게 된다.
마지막으로 다음은 디자인한 페이지들이다.
+ 보너스 페이지
