차곡 프로젝트 관리 플랫폼 화면 설계
여러 프로젝트의 진행률과 마감을 한 화면에 모으는 협업 플랫폼 시안. 간트 차트를 폰에서 어떻게 보여줄지까지 설계했습니다
- 제작 범위
- 플랫폼 화면 설계UI 시안반응형 대응 설계시안 뷰어 제작
- 사용 기술
- PC·모바일 짝 구성기기 목업 제작자동 넘김WebPHTMLCSS
실제 화면
그림이 아니라 실제로 동작하는 화면입니다. 여기서 바로 만져 보실 수 있습니다.
위 화면은 그림이 아니라 실제로 동작하는 화면입니다. 눌러서 직접 만져 보세요.
가상의 웹 제작 대행사입니다. 동시에 8개 프로젝트를 돌리는데 진행 상황은 각자 엑셀과 카카오톡에 흩어져 있다고 가정했습니다.
※ 차곡 CHAGOK은(는) 실제 존재하지 않는 가상의 브랜드입니다. 노바센트가 직접 기획하고 제작한 데모 화면이며, 페이지에 적힌 수치와 사업자 정보 또한 예시입니다.
프로젝트 목표
"지금 무엇이 늦고 있는가" 를 대표가 화면 한 번에 알 수 있게 하는 것입니다.
문제점
프로젝트 관리 도구는 대부분 기능이 너무 많습니다. 기능이 많으면 팀원이 안 씁니다. 안 쓰면 데이터가 비고, 데이터가 비면 대시보드가 거짓말을 합니다.
해결 방법
첫 화면에 숫자 네 개만 놓았습니다 — 진행 중 8, 이번 주 마감 5, 지연 2, 완료율 76%. 지연 2건이 빨간색으로 혼자 튀어서, 화면을 열면 눈이 먼저 그리로 갑니다.
왜 이렇게 디자인했나
화면의 모든 요소에는 이유가 있습니다. 이 프로젝트에서 내린 판단과 그 근거를 그대로 적었습니다.
- 01
지연을 빨간색 하나로 몰았습니다
관리 화면에서 색을 여러 개 쓰면 아무 데도 눈이 가지 않습니다. 진행 중은 시안, 완료는 초록, 지연만 빨강으로 두고 빨강은 오직 지연에만 씁니다. 그래야 빨간색이 보이는 순간 손이 움직입니다.
- 02
간트 차트를 폰에서는 다르게 그렸습니다
이 묶음에서 가장 어려운 대목이었습니다. 간트는 가로로 긴 그림이라 폰에서 그대로 줄이면 막대가 실오라기가 됩니다. 폰에서는 업무를 세로로 쌓고 각 줄에 진행률 막대와 퍼센트를 붙였습니다. 가로 시간축을 버리는 대신 "무엇이 몇 퍼센트인지" 는 살렸습니다.
- 03
폰 화면 아래에 다가오는 마감을 붙였습니다
PC에서는 간트 전체를 보며 마감을 읽을 수 있지만 폰에서는 못 읽습니다. 그래서 폰에만 "다가오는 마감" 목록을 따로 붙였습니다. 같은 화면이라도 기기가 다르면 필요한 정보가 다릅니다.
- 04
칸반은 네 칸으로 고정했습니다
할 일 · 진행 중 · 검토 · 완료. 칸을 늘릴 수 있게 만들면 팀마다 다르게 쓰다가 결국 아무도 안 봅니다. 네 칸으로 고정하면 누구 화면을 봐도 같은 뜻입니다. 폰에서는 이 네 칸을 탭으로 바꿨습니다.
- 05
권한을 세 단계로만 나눴습니다
관리자 · 편집자 · 뷰어. 권한 설계는 잘게 나눌수록 아무도 이해하지 못합니다. 세 단계면 "이 사람이 고칠 수 있나 없나" 를 한 번에 답할 수 있습니다.
주요 기능
- PC 5장 + 모바일 5장을 원본 그대로 게시 (다시 그린 픽셀 0개)
- 대시보드 · 프로젝트 · 프로젝트 상세(칸반) · 일정(간트) · 팀 · 권한
- 간트 차트를 폰에서는 세로 진행률 목록으로 다시 설계
- 지연 상태만 빨간색으로 단독 사용
- 좌우 버튼 · 방향키 · 스와이프로 옆으로 넘기기
- 아래 띠에서 5개 화면 전체 확인 · 눌러서 바로 이동
프로젝트 결과
대표가 아침에 화면을 한 번 열어 지연 2건을 확인하고, 그 두 건만 팀에게 묻는 흐름을 만들었습니다. 나머지 6건은 묻지 않아도 되게 하는 것이 목표였습니다.
