Intro🚶
전 회사를 퇴사하고 혼자 공부하는 시간이 많아지던 찰나. 아는 지인으로부터 블록체인 스타트업에 일해 볼 생각이 있냐는 제안을 받게 되었다. 그렇게 빠른 시간안에 면접 스케줄을 잡게 되었고 기술 면접에 대비하기 위해 프론트엔드 개발자라면 기본적으로 알아야 할 지식에 대해서 한번 더 정리를 하게 되었다. 그리고 드디어 면접 당일 날. 면접을 많이 해보지 않은 입장에서 매우 긴장되는 시간이었다. 그렇게 대표님과 여러 얘기를 나누었고 결과적으로 좋은 인상을 남기게 된거 같아 다행스럽기도 하다. 하지만 면접이 끝나고나서 하나의 과제를 받게 되었는데 회사를 소개할 수 있는 홈페이지를 만들어 달라고 해주셔서 흔쾌히? 수락하였다. 나의 기본기를 한번 더 시험해볼 수 있는 기회이기도 하고 목적의식을 만들 수 있다는 것에 대해 설레기도 했다. 입사까지 남은 시간은 약 일주일. 과연 어떤 결과물을 만들어 낼 수 있을까?
개발에 앞서서 먼저 생각할 것들
일단 먼저 개발을 하기 전에 나에게 주어진 상황을 정리해 봤다.
- 남은 시간은 약 일주일.
- 아직 입사를 하지 않은 시점에서 회사에 대한 자료들이 부족함.
- 어떠한 구조로 개발을 할 것인가.
- 어떤 디자인을 선택할 것인가.
남은 시간이 일주일이라는 시점에서 개발을 너무 무겁게 가져가면 안된다고 생각했다. 그리고 회사에 대한 정보가 부족한 상황에서 자료들을 주기적으로 요구하는 것 자체가 시간적으로 지체 할 수 있는 요인이기 때문에 더미데이터를 하드코딩해 스켈레톤을 만드는것에 목표를 잡았다. 컨텐츠들은 나중에 채워 넣어도 늦지 않기 때문이다.
구조 같은 경우는 회사를 소개하는 홈페이지인 만큼 서버와 주기적으로 통신하지 않는다는 전재를 깔고 Static SSR(Server side rendering)을 컨셉으로 잡아 정적인 페이지를 다루어야겠다고 생각을 했다. 그리고 처음 만들어지는 홈페이지이기 때문에 구글 상단에 빠르게 띄우고 유저들의 접근성을 용이하게 할 필요가 있다고 판단. SEO(Search Engine Optimazation)을 충분히 고려한 작업이 진행되어야 한다고 결정하게 되었다.
디자인 같은경우는 마이데이터 사업을 지향하는 회사인 만큼 심플하고 가독성을 높인 디자인이 필요하다고 생각했다. 그렇다고 심심한 느낌이 생길 수 있어 위해 어느정도 디자인 패러다임에 맞는 효과를 가져가도록 결정하였다. 그렇기 위해선 디자인 패러다임을 리서칭을 해야한다고 생각을 했다.
이렇게 생각을 하고 개발을 하기전 고려 해야 할 리스트를 정리하게 되었다.
- 홈페이지 특성상 정적이라고 판단했기 때문에 CSR(Client Side Rendering)보단 SEO가 좋은 Static SSR을 구현하자.
- 서버 관리에 부담을 줄이기 위해 웹 서버를 제공 해주는 github-page를 이용하자.
- 컨텐츠에 대한 생각은 나중으로 미루고 하드 코딩을 통해 스켈레톤을 만들자.
- 디자인은 심플하고 가독성을 높인 디자인을 선택하자.(하지만 심심함은 x).
- 크로스 브라우징, 반응형까지 해보자.(시간이 많이 걸리는 작업이기에 맨 마지막에 작업)
어떤 디자인을 선택할까?
구글링을 통해 웹 디자인 패러다임을 찾아 보기 시작했다. 그러던중 마음에 들던 디자인이 생겼는데, 그 디자인은 패럴렉스 디자인이다. 디자인 요소마다 레이어로 나누어 시간차를 적용해 마치 3차원적인 공간감을 느끼게 하는 디자인이었다. 처음 구현하는 만큼 기본 지식이 필요해 페럴랙스란 무엇인가 부터 찾아보기 시작했다.
아래 움짤은 패럴렉스가 어떤 느낌인지 보여주는 예시 이다.
출처:https://dribbble.com/shots/5533603-kuril-islands
도면 없이 건물 짓기 😭
도면 없이 건물을 짓는다는 건 사실상 엄청난 리소스를 잡아먹는 해서는 안 될 일이다. 방 하나를 만들더라도 예상치 못한 상황에 직면해 방을 다시 부숴야 하는 경우가 매번 생길 수 있기 때문이다. 내가 지금 하려는 행동이 이것과 비슷한 상황이었다. 디자인을 결정하지 못한 상태에서 바로 작업에 들어가야 시간을 간당간당하게 맞출 수 있을 거 같다고 생각해 모험을 해보기로 했다. 그렇게 리서칭과 머릿속으로 생각한 디자인을 수없이 조합해 가독성과 심플한 디자인, 그리고 심심하지 않은 효과를 만족시키기 위한 플랜을 만드는 데 3일이나 걸렸다. 아무리 좋은 코드로 만든 결과물일지 언정 프론트엔드에서 마지막 매듭을 메꾸는 건 시각적인 요소이다. 이 시각적인 요소가 유저에게 공감을 얻지 못한다면 등을 돌리기 때문이다.
의존성 줄이기🪖
내가 최종적으로 생각한 웹페이지 참된 모습?은 한번 배포해 놓고 신경을 더 이상 쓰지 않아도 될만한 상황을 만드는 것이었다. 각종 라이브러리, 혹은 CDN을 통해 이미지를 비동기적으로 받아온다든지, 의존성을 덜어내는 것이야 말로 내가 편하고 회사가 편하기 때문이다.
의존성을 덜어내기 위한 리스트이다.
- 이미지는 로컬에 가져와서 직접 호스팅하기. 빠른 이미지 로딩과 좋은 화질을 위해 webP 확장자를 채택.
- 라이브러리 절대 금지.(간단한 기능부터 손이 많이 가는 기능도 직접 구현)
- 웹페이지 배포는 무료로 재공해주는 클라우드 서버 이용하기 (돈, 서버관리에 대한 시간 절약).
이 3가지만 지켜준다면 배포 하고 나서 더 이상 신경 쓰지 않아도 되는 아주 편한 웹페이지가 될 것이라고 판단했다.
프로토타입 결과물
프로토타입 웹페이지
.gif)
일단 심플하게 흑,백에 톤으로 구성을 맞추었고 최대한 텍스트가 잘 보이게끔 만들었다. 거기에 심심하지 않게 인피니티 스크롤링과 중간에 비대칭 레이아웃, 패럴렉스 이미지를 구현해 놓았다.
앞으로 해야 할게 아직 많지만, 일단은 빠른 시간 내에 프로토타입을 구현하게 되어 한숨은 돌렸다.
반응형 작업
사실 반응형 작업이 매우 많은 시간을 잡아먹을 거라고 예상은 당연히 하고 있었다. 유저가 어떠한 디바이스를 통해 페이지에 들어올지 모르기 때문에 데스크탑(1순위), 모바일(2순위), 태블릿PC(3순위) 순으로 플랜을 짜기로 하였다. 보통 개발 방법론 중 탑-다운, 다운-탑으로 개발하는 세세한 개념들이 있는데 웹페이지도 마찬가지로 모바일이 중점인지, 데스크탑이 중점인지 명확하게 컨샙을 인지할 필요가 있다. 회사를 소개하는 페이지를 만드는 데에 있어서 데스크탑이 가장 중요하다고 판단하였고 태블릿PC 까지만 대응이 되게끔 구현하였다. 남은건 모바일인데... 모바일은 화면이 작은 만큼 화려함보단 텍스트를 정확하게 보여주는데 초점이 필요하므로 기존에 디자인과는 상반된 새로운 디자인이 필요하다. 이 디자인을 다시 구상할 걸 생각하니 벌써 머리가 아파진다.
반응형 작업 결과물
반응형 디자인에 대해 고민을 하던 중. 콘텐츠를 일관적으로 보여줄 방법에 대해 가장 간단한 결론을 내렸다. 디자인을 따로 구성할 필요 없이 그냥 기존 디자인의 레이아웃만 조정해 주면 간단한 거 아닌가? 그렇게 콘셉트를 잡고 가니 한결 단순해졌다. 나중에 “전문 디자이너가 온다면 디자이너에게 피드백을 받고 개편해도 늦지 않겠다.” 라는 결론이 내려졌다. Simple is Best.
