소규모 팀을 위한 웹 디자인 프로세스

작성자: jeekpark

웹 도메인에서 디자인 업무는 어떻게 진행될까?

이번 프로젝트는 디자이너가 따로 없기 때문에(개발자 5인 팀) 약간의 디자이너 경력이 있는 내가 디자인/프론트를 맡았다. 원래 속했던 디자인 필드는 패션사진, 기업이미지 쪽 도메인이라 이번 프로젝트를 통해 처음으로 웹디자인을 해보게 되었다. 웹개발 회사에서는 어떤식으로 업무가 진행되는지 dmin 님 께서 여러가지 키워드를 알려주셨다. 크게 세가지이다.

기획 - 디자인 - 개발 프로세스에서 다음과 같은 문서들이 만들어진다.

• 기능정의서
  • 웹사이트가 제공하려는 주요 기능
  • 각 기능의 간략한 설명, 목적
  • 디자이너의 파트라기보단 기획자, PM(+ 이해관계자)에 가깝다.
  • 목적은 핵심 기능을 명확히 정의하는 것이다.
• 스토리보드
  • 사용자 시나리오를 표현한다.
  • 각 단계에서 화면 구성과 상호작용 등을 기술한다.
  • 페이지 흐름을 알 수 있다.
  • 디자이너가 UX를 설계하고 시각적으로 표현하는 작업이다.
  • 이를 개발자가 이해하여 기능을 구현할 수 있어야한다.
  • 클라이언트가 미리 확인하고 의견을 제시할 수 있어야한다.
• 화면기술서
  • 각 화면의 구체적인 디자인 요소와 기술 사양으로 상세하게 정의하는 문서이다.
  • 색상, 폰트, 이미지, 아이콘 등 시각적 디자인 요소를 명확하게 정의하고, 다지인 가이드라인으로써 사용될 수 있어야한다.
  • 기술적인 설명이 들어갈 수 있는데, HTML, CSS, JS등의 기술 요소와 패키지, 버전등을 명시할 수 있다.
  • 예를 들어 반응형 디자인 적용 방안이 기록 될 수 있다.

(검색해보면 기능기술서, 기능설계서, 기능정의서, … 등 다른 명칭들이 많은데 비슷하면서 조금씩 다르니 유의해야한다.)

각각 용도와 목적이 조금식 다르겠지만 궁극적으로는 다른 사람들에게 어떻게 잘 보여주고 소통할 것인가에 대한 고민이 핵심이다. 즉 어떤 방법이든지 다수가 잘 이해하고 최대한 업무 효율을 높일 수 있는 선택을 해야한다.

그럼 우리는 어떻게 해야할까?

소규모인원(5인)의 프로젝트이고 프론트는 나를 포함해 2(~3)명이다. 킥스타트 회의를 맞친 시점에서 내가 만들어야할 문서는 스토리보드이다. 화면기술서를 따로 만들기보단 스토리보드에 각주로 화면기술서의 내용을 덫붙이는 쪽이 더 빠른 작업 효율이 기대된다.

아무래도 하나의 문서로 소통하는 편이 현재로서 가장 빠르고 유연할 것으로 기대된다. 규모를 생각하며 스토리보드에 시간을 너무 많이 쓰게 되는 ‘투머치 인포메이션’이 되지 않도록 유의해야한다.

피그마로 소규모 팀을 위한 혼합형 스토리보드(+화면기술서) 만들기

피그마는 웹디자인 툴로써 여러가지 장점이 있다.

• 프로젝트에 여러 유저가 접속해 동시에 작업이 가능하다. 실시간 반응성이 좋고 커서의 위치가 서로에게 공유된다.
• 작업하는 일부 영역에 잠금을 걸어 나만 편집이 가능한 구역을 설정할 수 있다.
• 웹뷰로 구현되어 있어 클라이언트 설치 없이 웹브라우저로 접근 가능하다.
• 매우 커다란 테이블 위에 문서를 펼쳐놓고 보는 방식이라, 상상가능한 모든 형태의 레이아웃을 자유롭게 디자인할 수 있다.(이러한 점을 이용해 스토리보드와 화면기술서를 혼합한 형태의 작업이 가능하다.)

기획-디자인-개발 프로세스를 위해 하나의 툴을 사용해야한다면, 피그마가 팀에게 가장 효율적일 것 같다.