페이지 구성

주제선정 => 시장 조사 => 기획 => 디자인 => 개발

단순하게 프로젝트 순서를 나열하면 이렇다.

시장 조사와 기획을 하여 사용하고자 하는 웹페이지에 들어갈 기능들을 작성한다.

그리고 디자인을 통해 기능들을 배치한다.

기획 단계에서 사용자의 사용순서등을 고려하고

예비 시안을 통해 스토리보드를 구현하여 자연스럽게 어플리케이션을 사용하도록 배치하고 구성한다.

데이터

에듀해시글로벌 파트너스 기업과 연계 프로젝트를 하면서 가장 많이 신경쓴 부분은 데이터 시각화였다.

D3.js 라이브러리를 사용하였다. 다양한 시각화가 가능하고 안되는건 없다고 할 수 있을만큼 디테일하게 커스텀할 수 있기때문에 선택하였다. 사용자들이 글을 읽는 것 보다 그래프와 같은 차트와 도형으로 표현하여 한눈에 데이터를 받아드릴수 있도록 하기 위해 데이터 시각화를 사용한다.

문제

간단하게 성적표를 웹페이지로 보여주는 화면을 구현하였다.

그냥 성적만 보여주는 것은 아니고 성적을 분석하여 성장률과 현재 성적의 위치를 표현한다.

구현을 하면서 점점 의문이 들었다.

5개의 그래프를 넣어 데이터를 시각화 하였지만 페이지를 보면 한눈에 데이터들이 눈에 들어오지 않았다.

잘 읽히는 웹 페이지

정말 많은 고민을 해보았다.

여러가지 자료들을 참조하며 고민을 하였다.

고민하던 중 react로 구현되어 관심을 갖었던 페이지가 떠올랐다.

꽤 많은 정보들을 표현하는데 차트, 도형은 전혀 사용되지 않았다.

하지만 보자마자 "예쁜데?" , "깔끔한데", "오 내가 이렇게 성장했구나?".

문제 해결

결국 단순한 시각화가 문제가 아니였다.

기술적으로 데이터를 멋지게 시각화 하더라도 구성을 잘 하지 못하면 데이터는 읽히지 않는다.

페이지를 딱 보면 가장 먼저 눈이 가는 곳이 필요하고 눈이 가는곳은 그 페이지를 대표하는 곳이여야 한다.

그리고 처음 눈이 간 곳부터 이용자가 필요로 하는것을 찾고 읽는 과정까지 이용자는 편안하게 스르륵 읽어가며 자연스럽게 정보를 얻고 사용해야한다. 이렇게 읽어가는 과정에서는 폰트의 크기 굵기 , 패딩과 마진, icon등이 돕는다.

먼저 바꾼것은 페이지 타이틀!

타이틀에 포인트를 주어 페이지에 들어오자마자 타이틀에 눈이 가도록 하였다.

그리고 타이틀 아래에 가장 궁금해할 정보를 우선 표현하였다. 이전에는 3개의 그래프가 바로 나오도록 하여 시선이 흩어지게 되고 리딩이 원할하지 않았다고 생각한다.

한눈에 총점과 각 과목 점수가 넓이를 모두 차지하면서 보여지도록 하였다.
그리고 그 아래로 2개의 차트씩 중요도 순으로 배치하고 아래로 갈 수록 상세정보와 상세 분석을 볼 수 있도록 하였다.

해결 이후

생각해보면 당연하게 구성을 고민하고 했어야 했지만 기획 단계에서는 데이터 시각화를 얼만큼 해낼 수 있는가가 초점이였다.

결국 구현을 다 하고 문제를 느끼고 해결해 나갔다.

지속적으로 이상하다고 어필해서 팀원들은 힘들었을것 같지만 당연히 해결했어야할 문제라고 생각한다.

여러 프로젝트를 경험한 선배 개발자들이 제작한 페이지들을 보며 배울것이 무엇인지 또 하나 알게 되었다.

기획과 디자인에서 할일이라고 하지만 결국 개발을 하고 배포를 했을때 페이지의 흥망은 모든 프로젝트팀원들이 함께 한다.

개발 단계에서 불필요한 부분과 효율성이 없다고 판단되는 부분, 페이지 흐름에 방해가 되는 부분 등 이해가 되지않는 부분은 항상 어필하고 서로 피드백을 통해 개선되거나 충분한 이유로 이해할 수 있게 되는것이 필요하다고 느꼈다.

물론 팀원간에 회의, 피드백, 어필 등 개발을 하며 함께 고민할때는 상대방을 충분히 고려하는 대화로 진지하지만 행복했으면 좋겠다.

오랜시간 작업으로 몸은 괴로워도 생각은 행복할 수 있는 개발자가 되자.