AI 시대에는 사업을 하는 사람이 디자인도 합니다: 제보 버튼·지식 게시판·사이드바 색·메뉴 아이콘 시안 | DAKER 커뮤니티

오른쪽 위에 DACON 공식 로고가 있고, 어두운 바탕과 노란 바탕의 메뉴 아이콘 20개 판, 파란 그라데이션 사이드바 화면이 겹쳐 보이는 10초 모션 영상 미리보기입니다
시안 화면을 이어 붙인 10초 모션 미리보기입니다. 원본 영상은 글 아래 첨부 파일에 있습니다. 오른쪽 위는 DACON 공식 로고입니다.

AI 시대에는 사업을 하는 사람도 화면 시안을 직접 만들어 개발팀에 넘길 수 있습니다. DACON 운영 쪽에서 Claude 디자인 캔버스로 사내 어드민의 「제보·지식 FAB 시안」을 만들었고, 이 글은 그 시안에서 눈여겨볼 점 네 가지를 정리합니다. 아직 시안 단계이며 실제 서비스에 적용된 화면이 아닙니다. 시안에 담긴 사내 제보 내용과 직원 정보는 공개하지 않았고, 화면은 이름과 로고 문구가 드러나지 않는 부분만 잘라 실었습니다.

화면 어디서든 버튼 하나로 제보와 지식 공유를 합니다

시안의 첫 번째 제안은 화면 오른쪽 아래에 떠 있는 버튼 하나입니다. 이 버튼 하나로 에러 제보, 의견 제보, 지식 공유 세 가지를 모두 접수합니다. 제보를 보내면 언제, 어디서, 어떤 환경에서 일어났는지가 자동으로 함께 붙습니다. 담당자가 제보자에게 다시 묻는 단계를 줄일 수 있는 설계입니다.

처리 상태는 접수, 확인 중, 처리 완료 또는 보류의 순서로 바뀌고, 상태가 바뀔 때마다 제보자에게 알림이 갑니다. 알림 경로는 앱, Google Chat, 푸시 세 가지입니다. 제보를 보낸 사람이 결과를 기다리며 따로 문의하지 않아도 되게 하는 장치입니다.

지식 게시판은 Drive와 Chat을 뒤지기 전에 먼저 열도록 만듭니다

두 번째는 지식 게시판입니다. 화면 상단 문구는 「Drive·Chat을 뒤지기 전에 여기서 먼저」이고, 검색창과 업무 분류 탭이 바로 아래에 놓입니다. 오래된 글에는 「오래됐어요 — 확인 필요」 뱃지가 붙어서, 읽는 사람이 내용이 낡았을 가능성을 한눈에 알 수 있습니다. 제보로 들어온 글을 지식 글로 옮기는 기능도 있어, 해결된 제보를 다음 사람을 위한 지식으로 남길 수 있습니다.

지식 게시판 화면의 위쪽입니다. 제목 지식 게시판, 문구 Drive Chat 를 뒤지기 전에 여기서 먼저, 지식 쓰기 버튼, 검색창과 분류 탭이 보입니다
지식 게시판 시안의 위쪽입니다. 검색창과 분류 탭이 첫 화면에 놓입니다.
최종 확인 9월 2일 글에 오래됐어요 확인 필요 뱃지가 붙은 모습입니다
오래된 글에 붙는 「오래됐어요 — 확인 필요」 뱃지입니다.

사이드바 색은 세 가지 안을 같은 화면에 놓고 비교했습니다

세 번째는 사이드바 색입니다. 시안은 지금 운영 중인 흰색, 라이트, 파란 그라데이션 세 안을 같은 메뉴 구성으로 나란히 놓고 비교합니다. 파란 그라데이션은 #1C5CAB에서 #0B3A78로 내려가며, 이 위에서 흰 글자의 대비는 6.7:1에서 11:1 사이로 계산돼 있습니다. 단색 #3B5BFF 위의 흰 글자는 5.1:1로 통과했고, 일부 안은 4.5:1에 못 미쳐 탈락시켰다고 시안에 적혀 있습니다. 「예쁘다」가 아니라 글자 대비 숫자로 탈락 이유를 남긴 점이 눈에 띕니다.

지금 운영 중인 흰색 사이드바, 라이트 사이드바, 파란 사이드바를 같은 메뉴 구성으로 나란히 놓은 비교 화면입니다
사이드바 세 가지 안을 같은 메뉴로 비교한 화면입니다. 로고 문구가 보이는 윗부분은 잘라 냈습니다.
파란 그라데이션 사이드바에 흰 글자 메뉴가 놓인 확대 화면입니다
파란 그라데이션 사이드바에서 흰 글자 메뉴를 확대한 화면입니다.

메뉴 아이콘 20개를 세 가지 스타일로 만들었습니다

네 번째는 메뉴 아이콘입니다. 같은 20개 메뉴를 세 가지 스타일로 만들어 놓고 비교합니다.

어두운 바탕에 파랑과 초록 투톤 메뉴 아이콘 20개가 4줄로 놓인 화면입니다
다크 스타일: 파랑과 초록 투톤 아이콘 20개입니다.
노란 바탕에 검정 윤곽선과 겹친 원색으로 그린 메뉴 아이콘 20개가 4줄로 놓인 화면입니다
브루탈 스타일: 노란 바탕, 검정 윤곽, 겹친 원색 아이콘 20개입니다.

사업하는 사람이 시안을 만들 때 지킨 방식: 확정, 추측, 미정을 나눠 적습니다

시안에서 가장 배울 만한 점은 화면보다 표기 방식입니다. 시안 곳곳에 스티커 메모를 붙여 「확정(말씀하신 것)」, 「추측(확인 필요)」, 「아직 정할 것」을 구분해 둡니다. 사업하는 사람이 직접 디자인하면 요청한 내용과 만든 사람이 짐작해서 채운 내용이 섞이기 쉽습니다. 세 가지를 나눠 적어 두면 개발자와 디자이너는 무엇을 그대로 따르고 무엇을 되물어야 하는지 바로 알 수 있습니다.

AI로 시안을 만드는 DAKER 참가자에게도 그대로 쓸 수 있는 방법입니다. 해커톤 데모 화면을 AI와 함께 만들 때도, 확정한 요구와 AI가 채운 추측, 아직 정하지 못한 항목을 한 장에 표시해 두면 심사 전에 무엇을 확인할지 정리됩니다. 여러분은 서비스 화면의 색이나 아이콘을 정할 때 어떤 기준을 쓰고 계신가요? 시안을 만들며 겪은 점을 댓글로 나눠 주세요.

출처