웹사이트 프로세스 설명도를 제작하기 전에 많은 사람들이 바로 디자인 도구를 열고 그리기 시작합니다. 하지만 그리다 보면 단계가 누락되고, 텍스트가 맞지 않으며, 스타일이 통일되지 않아 반복적으로 수정하며 시간을 낭비하게 됩니다. 사실 몇 가지 준비 작업만 미리 해두면 이후 제작이 훨씬 순조로워집니다. 아래에는 제작 전에 준비해야 할 내용 체크리스트를 정리했으니 참고하여 실행해 보세요.
1. 프로세스의 목적과 대상 명확히 하기
먼저 이 프로세스 설명도가 웹사이트의 어느 위치에 사용될 것인지, 누가 볼 것인지 생각해야 합니다. 예를 들어:
- 제품 사용 프로세스인 경우 사용자는 조작 단계에 더 관심을 가지므로 도표는 간결하고 명확해야 합니다.
- 서비스 프로세스인 경우 사용자는 시간 노드와 인도물에 관심을 가질 수 있으므로 핵심 단계를 표시해야 합니다.
- 내부 팀용 프로세스 설명도인 경우 더 자세한 판단 분기와 예외 처리가 필요합니다.
목적을 명확히 한 후 도표의 주요 시각적 스타일(비즈니스, 플랫, 손그림 스타일 등)과 복잡성을 결정하여 무작정 시작하지 않도록 합니다.
2. 완전한 프로세스 단계와 텍스트 개요 정리하기
바로 그림을 그리지 말고 먼저 프로세스를 텍스트로 작성하세요. 다음을 포함하는 것이 좋습니다:
- 시작점: 사용자가 어디에서 시작하는지 (예: 페이지 방문, 버튼 클릭).
- 핵심 단계: 각 단계의 이름, 동작 또는 판단 조건.
- 분기 방향: 조건이 성립하면 어느 경로로 가고, 성립하지 않으면 어느 경로로 가는지.
- 종료점: 프로세스 종료 표시 (예: 제출 성공, 다운로드 완료).
동시에 각 단계에 대해 간결한 텍스트 설명(8자 이내 권장)을 추출하여 도표에 텍스트가 너무 많아 가독성에 영향을 주지 않도록 합니다. 텍스트 개요를 정리한 후 동료나 고객과 함께 확인하여 프로세스에 오류가 없는지 확인한 후 디자인을 시작하세요.
3. 시각적 참고 자료와 색상 구성 수집하기
아이콘 스타일과 색상을 미리 결정하면 제작 중간에 도구를 자주 전환하며 자료를 찾는 것을 피할 수 있습니다. 다음을 준비하는 것이 좋습니다:
- 아이콘 라이브러리: 예를 들어 무료 상업용素材 사이트에서 플랫, 라인 또는 채우기 스타일의 아이콘을 다운로드하여 통일성을 유지합니다.
- 색상 팔레트: 웹사이트 브랜드 색상이나 전체 스타일에 따라 주색, 보조색, 배경색, 텍스트 색상을 결정하며 일반적으로 3~4가지 색상으로 제한합니다.
- 화살표 및 연결선 스타일: 직선, 꺾은선, 곡선 중 어떤 것을 사용할지, 화살표 방향이 통일되었는지.
- 레이아웃 참고: 유사한 웹사이트의 프로세스 설명도 스크린샷을 몇 장 찾아 레이아웃과 텍스트 크기를 참고합니다. 단, 표절하지 말고 구조만 참고하세요.
4. 도표 유형과 크기 결정하기
프로세스 설명도가 반드시 위아래로 배열된 와이어프레임일 필요는 없습니다. 내용에 따라 적절한 유형을 선택할 수 있습니다:
- 선형 프로세스 설명도: 단계가 적고 단방향 프로세스에 적합합니다.
- 스윔레인 다이어그램: 부서 간 또는 역할 분담이 있는 프로세스에 적합합니다.
- 의사 결정 트리 다이어그램: 판단 분기가 많은 프로세스에 적합합니다.
동시에 이미지 출력 크기(예: 너비 1200픽셀, 높이는 내용에 따라 자동 조정)를 결정하고 웹사이트에서 사용되는 시나리오(내부 페이지 삽화, 기사 이미지, 배너의 일부 등)를 고려합니다. 위치에 따라 크기와 해상도 요구 사항이 다릅니다.
5. 도구와 템플릿 준비하기
디자인 능력에 따라 적절한 도구를 선택하세요. 직접 작업하는 경우:
- 온라인 도구: Canva, ProcessOn, Lucidchart 등은 기성 템플릿이 있어 텍스트와 색상만 조정하면 됩니다.
- 디자인 소프트웨어: Photoshop, Illustrator 또는 Figma는 맞춤형 요구 사항이 높은 경우에 적합합니다.
외주 디자인을 의뢰하는 경우 먼저 텍스트 개요와 참고 이미지를 제공하여 디자이너가 프레임워크에 따라 바로 작업할 수 있도록 하면 커뮤니케이션 비용을 절약할 수 있습니다.
6. 규정 준수 및 저작권 위험 확인하기
마지막으로 사용된 모든 아이콘, 글꼴, 이미지 자료가 무료 상업용이거나 라이선스를 획득했는지 확인합니다. 특히 기업 웹사이트에서 사용할 때 자료 저작권 문제로 인한 분쟁을 피하기 위해 중요합니다. 또한 프로세스 설명도의 텍스트 설명은 실제와 정확해야 하며 서비스 단계나 효과를 허위로 구성하지 않아야 합니다.
요약
프로세스 설명도를 제작하기 전에 위 내용을 준비하는 데 30분을 투자하면 이후 디자인 효율이 크게 향상됩니다. 먼저 프로세스를 명확히 생각하고 작성한 후 그림을 그리면 일반적으로 한 번에 통과할 수 있습니다. 웹사이트의 서비스 페이지나 도움말 센터를 업데이트 중이라면 이 체크리스트에 따라 미리 준비하면 수정 횟수를 줄일 수 있습니다.
