사이트를 기획하며 알게 된 것들

  얼마 전 웹사이트 ‘래빗’의 신규 추가 페이지를 맡아 기획하게 되었습니다. 매일 소비자 입장에서 사용만 했던 웹사이트를 생산자 입장에서 구상하고 만들어 보는 것은 신기하고도 흥미로운 일이었습니다. 하지만 처음 맡는 일이다 보니 시행착오도 있었습니다. 하지만 이 시행착오들을 통해 배운 점이 많다고 생각합니다. 이렇게 배운 내용들을 기록으로 남겨두기 위해 이곳에 몇 자 적어보겠습니다. 보다 이해가 쉽도록 순서대로 나열했습니다. 

 

1. 사용자 입장에서 플로우를 그려보자

  

  플로우 차트란 <사용자 시나리오를 중심으로 데이터 흐름을 정의하는 것>을 말합니다. 레이아웃만 먼저 추가하다 보면 세세하지만 꼭 필요한 페이지나 기능들을 빼먹기 쉽습니다. 그래서 유저의 입장에서 사이트의 처음 입장부터의 행동 흐름을 상상하며 따라가 봅니다. 이것을 한눈에 보기 쉽게 정리한 순서도가 플로우 차트입니다. 그리고 기본 플로우 외에 일반적이지 않은 상황을 ‘엣지 케이스’라고 하는데, 이런 경우도 플로우 차트를 그리며 미리 그려놓으면 일어날 수 있는 모든 경우의 수를 미리 방어할 수 있습니다. 

 

2. 사이트 레이아웃은 최대한 자세하게 만들자.

 

  처음에는 피피티에 계속된 사각형 도형을 그려넣으며 레이아웃을 잡고 있자니 내가 잘하고 있는 게 맞는 건가 싶기도 하고 이건 디자인의 영역이 아닐까 헷갈리기도 했습니다. 하지만 곧 기획 단계에서는 ‘자세하면 자세할수록 좋다’는 것을 알게 되었습니다. 그래서 비슷한 성격의 타 사이트들을 열심히 뒤지며 꼭 필요한데 빠트린 기능은 없는지, 화면 구성은 어떻게 해야 한눈에 들어올지도 같이 고민하며 ‘제가 할 수 있는 한 최대한으로’ 레이아웃을 자세하게 넣었습니다. 

 

3. 클릭하면 어떤 페이지가 나오는지에 대한 설명도 추가하자

 

  

  나의 방대한 기획 아이디어들을 전부 개발자한테 전달하는 것은 쉽지 않지만 꼭 필요한 일입니다. 따라서 보는 사람이 누구이든 쉽게 이해할 수 있도록 조금 귀찮더라도 ‘이 버튼을 클릭하면 이 페이지가 나오고, 이 기능이 있고.. ’ 하는 것들을 자세히 적어놓아야 한다는 것을 배웠습니다. 

 

4. 데이터 테이블을 정의하는 단계도 염두에 두자

 

 

  이 부분에 대해서는 ‘이런 것이 있다’ 정도만 배웠지만, 앞으로 사이트를 기획할 때 개발자와 효율적인 협업을 위해서는 필요한 단계라는 것을 알게 되었습니다. 그리고 처음 보는 char(character), varchar(variable character filed) 등의 데이터 타입에 대해서도 모르는 단어들을 구글링 하여 데이터가 차지하는 공간을 줄이기 위한 방안도 고민해 보는 계기가 되었습니다. 

 

결론 

  전체 사이트가 아니라 사이트 중의 ‘한 페이지’만을 맡아 기획했지만, 처음 제 생각보다 훨씬 알아야할 것도, 신경 써야 할 것도 많았습니다. 하지만 저의 기획대로 나온 디자인 XD파일을 보고, 이대로 개발이 진행되어가는 과정을 함께하면서 실제 웹페이지가 만들어지는 데에 기여했다는 점이 무척 뿌듯하기도 합니다. 앞으로 더 배워야 할 것이 많겠지만, 한 단계씩 밟아나가다 보면 어느새 Apple 공식 홈페이지 같은 멋진 웹사이트도 만들어볼 수 있지 않을까(!) 생각합니다:)