미션: 디자이너 없이 1500명이 사용할 서비스 만들기
AI 기반 해커톤 평가 플랫폼 스냅코드 PM 회고록 2편
해당 글은 이전 편과 이어집니다!
https://brunch.co.kr/@7a2e11fe067d43e/20
우선 하겠다고는 했는데, 막상 피그마를 키니 참 막막한 감정이 들었다.
내가 제작해야 하는 페이지 플로우는 크게 해커톤 소개 및 제출 안내 랜딩 페이지 / 해커톤 결과물 제출 페이지 / 관리자용 대시보드 페이지였다.
해커톤 소개 및 제출 안내 랜딩 페이지 / 해커톤 결과물 제출 페이지는 그래도 어떻게 만들어야 할지 그림이 그려졌지만 관리자용 대시보드 페이지는 참 막막했다.
해커톤 관리 대시보드 레퍼런스 찾기도 사막의 바늘 찾기와 같았다.
1) 어떤 정보를 가장 먼저 보아야 하는지 파악하기
이를 해결하기 위해 우선 첫 번째로, IDI(In-Depth Interview)를 진행했다.
관리자용 대시보드를 사용할 클라이언트, 즉 멋쟁이사자처럼 커뮤니티팀과 회의를 할 때 대시보드에서 어떤 기능이 필요한지, 어떤 정보를 현장에서 빠르게 확인해야 하는지 파악했다.
여기서 얻은 작은 인사이트는 '정보의 우선순위는 어떤 것이 높은가요?'라고 했을 때는 우리 팀도 이것도 중요한 것 같고.. 저것도 중요한 것 같고.. 싶어서 명확한 답이 나오지 않았는데 '해커톤 당일날 어떤 정보를 가장 먼저 확인하셔야 하나요?'라고 질문을 바꾸니 훨씬 직관적인 답을 얻을 수 있었다는 것이다.
2) AI 프로토타입 툴로 MVP 제작하기
이렇게 우선적으로 띄워야 하는 정보와 대시보드에서 노출되어야 하는 정보를 파악하고 Lovable과 Readdy를 사용하여 프로토타입을 제작했다.
(사용해 본 툴의 경우, Lovable과 Readdy 가 가장 직관적이고 결과물 퀄리티도 좋았는데, Lovable은 24시간 기준으로 크레딧이 충전되는 반면, Readdy는 무료 크레딧을 소진하면 유료 요금제를 사용해야 하기 때문에 오래 쓸 예정이라면 Lovable을 좀 더 추천한다!)
Lovable의 무료 크레딧은 소중하기 때문에 어떻게 해야 효율적인 프로토타이핑을 할 수 있을지 찾아보았는데, 리서치 끝에 내가 얻은 인사이트는 아래와 같다.
1. ~해줘 같은 서술식이 아닌 JSON 형태로 프롬프트를 입력할 것
2. 프롬프트를 이어서 쓸 때, 이전 디자인 형식을 유지하고 싶은지, 어디를 변경하고 싶은지 명확하게 요청할 것
이 결과를 비교해 보기 위해 실험을 했다.
먼저 첫 번째는 자연어 형식으로 입력한 프롬프트이다.
활용한 프롬프트 1
활용한 AI : Lovable
해커톤 제출 관리 대시보드를 생성해야 합니다. 대시보드의 가장 상단에는 제출 현황, 이상 발견, 평가 완료 현황이 보여야 합니다. 가장 메인이 되는 대시보드 영역에는 팀명, 학교명, 제출 URL, PDF 자료, 평가 중/평가 전/평가 완료 여부가 보여야 하며 대시보드 상단에는 엑셀 다운로드가 있어야 합니다. 대시보드는 다크모드 테마로 제작해 주세요.
나온 결과물 ⬇️
활용한 프롬프트 2
활용한 AI : Claude
해커톤 제출 관리 대시보드를 생성해야 합니다. 대시보드의 가장 상단에는 제출 현황, 이상 발견, 평가 완료 현황이 보여야 합니다. 가장 메인이 되는 대시보드 영역에는 팀명, 학교명, 제출 URL, PDF 자료, 평가 중/평가 전/평가 완료 여부가 보여야 하며 대시보드 상단에는 엑셀 다운로드가 있어야 합니다.
이 내용에 더 필요할 것 같은 항목을 더해 JSON 형태로 변경해 주세요.
1차 프롬프트로 내가 원하는 형태의 기획이 나오긴 했지만, 아직 디테일이 조금 부족한 상황이다.
개인적으로는 AI를 활용하면서 내가 원하는 항목을 100% 정의하는 것보다 느슨한 범위로 명령을 주고 점점 좁혀가는 것이 좋은 것 같다. 이번에 대시보드 페이지를 기획하면서도 세상에 없는 서비스를 만들어야 하다 보니 어떤 정보를 더 넣어야 할까/제외해야 할까 가 많이 고민됐는데, AI와 질의응답하면서 '아 이건 필수인데 내가 미처 생각 못했다.' 싶은 것도 꽤 많이 발견했기 때문이다.
클로드를 선택한 이유는 GPT는 제한을 주지 않으면 과하게 필요 없는 정보까지 포함시켜 버리는데 클로드가 딱 너무 과하지도, 부족하지도 않게 데이터를 추가해 줘서 프로토타입 제작에 가장 좋은 것 같다.
활용한 프롬프트 3
이렇게 탄생한 JSON 형태의 프롬프트는 아래와 같다.(길이 주의)
{ "hackathon_submission_dashboard": { "metadata": { "dashboard_name": "해커톤 제출 관리 대시보드", "version": "1.0", "last_updated": "2025-10-14", "theme": "dark" }, "theme_config": { "mode": "dark", "colors": { "background": "#111827", "surface": "#1F2937", "surface_hover": "#374151", "primary": "#3B82F6", "primary_hover": "#2563EB", "success": "#10B981", "warning": "#F59E0B", "error": "#EF4444", "text_primary": "#F9FAFB", "text_secondary": "#D1D5DB", "text_muted": "#9CA3AF", "border": "#374151", "shadow": "rgba(0, 0, 0, 0.5)" } }, "header": { "title": "제출 현황 관리", "background_color": "#1F2937", "text_color": "#F9FAFB", "actions": { "export_to_excel": { "label": "엑셀 다운로드", "type": "button", "position": "top-right", "file_format": "xlsx", "background_color": "#3B82F6", "hover_color": "#2563EB", "text_color": "#FFFFFF", "data_includes": [ "팀명", "학교명", "제출 URL", "PDF 자료", "평가 상태" ] } } }, "summary_section": { "position": "top", "background_color": "#1F2937", "border_color": "#374151", "cards": [ { "card_id": "submission_status", "title": "제출 현황", "background_color": "#1F2937", "border_color": "#374151", "title_color": "#9CA3AF", "metrics": [ { "label": "전체 팀", "value": 0, "data_field": "total_teams", "label_color": "#6B7280", "value_color": "#3B82F6" }, { "label": "제출 완료", "value": 0, "data_field": "completed_submissions", "label_color": "#6B7280", "value_color": "#10B981" }, { "label": "미제출", "value": 0, "data_field": "pending_submissions", "label_color": "#6B7280", "value_color": "#F59E0B" }, { "label": "제출률", "value": "0%", "data_field": "submission_rate", "label_color": "#6B7280", "value_color": "#A855F7" } ] }, { "card_id": "anomaly_detection", "title": "이상 발견", "background_color": "#1F2937", "border_color": "#374151", "title_color": "#9CA3AF", "metrics": [ { "label": "필수 항목 미제출", "value": 0, "data_field": "missing_required_items", "label_color": "#6B7280", "value_color": "#EF4444" }, { "label": "파일 크기 초과", "value": 0, "data_field": "oversized_files", "label_color": "#6B7280", "value_color": "#F59E0B" }, { "label": "비공개 Repository", "value": 0, "data_field": "private_repositories", "label_color": "#6B7280", "value_color": "#FBBF24" }, { "label": "부정행위 의심", "value": 0, "data_field": "fraud_suspects", "label_color": "#6B7280", "value_color": "#EF4444" } ] }, { "card_id": "evaluation_status", "title": "평가 완료 현황", "background_color": "#1F2937", "border_color": "#374151", "title_color": "#9CA3AF", "metrics": [ { "label": "평가 대기", "value": 0, "data_field": "pending_evaluation", "label_color": "#6B7280", "value_color": "#9CA3AF" }, { "label": "평가 중", "value": 0, "data_field": "in_progress_evaluation", "label_color": "#6B7280", "value_color": "#F59E0B" }, { "label": "평가 완료", "value": 0, "data_field": "completed_evaluation", "label_color": "#6B7280", "value_color": "#10B981" }, { "label": "평가 완료율", "value": "0%", "data_field": "evaluation_completion_rate", "label_color": "#6B7280", "value_color": "#A855F7" } ] } ] }, "main_dashboard": { "position": "center", "title": "팀별 제출 현황", "background_color": "#1F2937", "border_color": "#374151", "text_color": "#F9FAFB", "features": { "search": { "enabled": true, "searchable_fields": [ "team_name", "school_name" ], "placeholder": "팀명 또는 학교명 검색", "background_color": "#374151", "border_color": "#4B5563", "text_color": "#F9FAFB", "icon_color": "#9CA3AF" }, "filter": { "enabled": true, "background_color": "#374151", "border_color": "#4B5563", "text_color": "#F9FAFB", "filter_options": [ { "name": "평가 상태", "values": [ "평가 전", "평가 중", "평가 완료" ] }, { "name": "제출 상태", "values": [ "제출 완료", "미제출", "부분 제출" ] }, { "name": "이상 발견", "values": [ "정상", "경고", "오류" ] } ] }, "sort": { "enabled": true, "sortable_fields": [ "team_name", "school_name", "submission_date", "evaluation_status" ] } }, "table": { "header_background": "#1F2937", "header_text_color": "#9CA3AF", "header_border_color": "#374151", "row_background": "#1F2937", "row_hover_background": "#374151", "row_text_color": "#F9FAFB", "row_border_color": "#374151", "alternating_rows": false }, "columns": [ { "column_id": "team_name", "label": "팀명", "type": "text", "width": "12%", "sortable": true, "filterable": false, "text_color": "#F9FAFB" }, { "column_id": "school_name", "label": "학교명", "type": "text", "width": "15%", "sortable": true, "filterable": false, "text_color": "#D1D5DB" }, { "column_id": "submission_url", "label": "제출 URL", "type": "link", "width": "20%", "sortable": false, "filterable": false, "link_color": "#3B82F6", "link_hover_color": "#60A5FA", "actions": [ { "action": "open_link", "icon": "external-link", "icon_color": "#3B82F6" }, { "action": "copy_link", "icon": "copy", "icon_color": "#9CA3AF" } ] }, { "column_id": "pdf_material", "label": "PDF 자료", "type": "file", "width": "15%", "sortable": false, "filterable": false, "actions": [ { "action": "download", "icon": "download", "icon_color": "#3B82F6" }, { "action": "preview", "icon": "eye", "icon_color": "#9CA3AF" } ] }, { "column_id": "github_frontend", "label": "GitHub (FE)", "type": "link", "width": "15%", "sortable": false, "filterable": false, "link_color": "#3B82F6", "link_hover_color": "#60A5FA", "actions": [ { "action": "open_link", "icon": "external-link", "icon_color": "#3B82F6" } ] }, { "column_id": "github_backend", "label": "GitHub (BE)", "type": "link", "width": "15%", "sortable": false, "filterable": false, "link_color": "#3B82F6", "link_hover_color": "#60A5FA", "actions": [ { "action": "open_link", "icon": "external-link", "icon_color": "#3B82F6" } ] }, { "column_id": "evaluation_status", "label": "평가 상태", "type": "status", "width": "12%", "sortable": true, "filterable": true, "status_values": [ { "status": "평가 전", "background_color": "#4B5563", "text_color": "#FFFFFF", "icon": "clock" }, { "status": "평가 중", "background_color": "#D97706", "text_color": "#FFFFFF", "icon": "spinner" }, { "status": "평가 완료", "background_color": "#059669", "text_color": "#FFFFFF", "icon": "check-circle" } ] }, { "column_id": "anomaly_status", "label": "이상 발견", "type": "status", "width": "12%", "sortable": true, "filterable": true, "status_values": [ { "status": "정상", "background_color": "#059669", "text_color": "#FFFFFF", "icon": "check" }, { "status": "경고", "background_color": "#D97706", "text_color": "#FFFFFF", "icon": "alert-circle" }, { "status": "오류", "background_color": "#DC2626", "text_color": "#FFFFFF", "icon": "x-circle" } ], "warning_details": [ "필수 항목 미제출", "파일 크기 초과", "비공개 Repository", "부정행위 의심" ] }, { "column_id": "submission_date", "label": "제출 일시", "type": "datetime", "width": "12%", "sortable": true, "filterable": false, "text_color": "#D1D5DB" }, { "column_id": "actions", "label": "관리", "type": "actions", "width": "10%", "sortable": false, "filterable": false, "available_actions": [ { "action": "view_details", "label": "상세보기", "icon": "eye", "icon_color": "#3B82F6" }, { "action": "update_evaluation", "label": "평가 상태 변경", "icon": "edit", "icon_color": "#9CA3AF" }, { "action": "send_notification", "label": "알림 발송", "icon": "mail", "icon_color": "#9CA3AF" }, { "action": "flag_anomaly", "label": "이상 표시", "icon": "flag", "icon_color": "#EF4444" } ] } ], "pagination": { "enabled": true, "rows_per_page": [10, 25, 50, 100], "default_rows": 25, "background_color": "#1F2937", "border_color": "#374151", "text_color": "#9CA3AF", "button_background": "#374151", "button_hover_background": "#4B5563", "button_disabled_color": "#6B7280" } }, "detail_modal": { "title": "팀 상세 정보", "background_color": "#1F2937", "border_color": "#374151", "overlay_color": "rgba(0, 0, 0, 0.7)", "title_color": "#F9FAFB", "max_width": "768px", "fields": [ { "label": "팀명", "type": "text", "label_color": "#9CA3AF", "value_color": "#F9FAFB" }, { "label": "학교명", "type": "text", "label_color": "#9CA3AF", "value_color": "#F9FAFB" }, { "label": "팀원 수", "type": "number", "label_color": "#9CA3AF", "value_color": "#F9FAFB" }, { "label": "제출 완료 항목", "type": "checklist", "label_color": "#9CA3AF", "items": [ "배포된 서비스 URL", "GitHub 레포지토리 (FE)", "GitHub 레포지토리 (BE)", "발표 자료 (PDF)" ], "checked_color": "#10B981", "unchecked_color": "#EF4444" }, { "label": "이상 사항", "type": "list", "label_color": "#9CA3AF", "value_color": "#EF4444" }, { "label": "평가 점수", "type": "number", "label_color": "#9CA3AF", "value_color": "#F9FAFB" }, { "label": "평가 의견", "type": "textarea", "label_color": "#9CA3AF", "value_color": "#D1D5DB" }, { "label": "제출 일시", "type": "datetime", "label_color": "#9CA3AF", "value_color": "#F9FAFB" } ], "buttons": { "close": { "label": "닫기", "background_color": "#374151", "hover_color": "#4B5563", "text_color": "#F9FAFB" } } }, "data_structure": { "team_record": { "team_id": "string", "team_name": "string", "school_name": "string", "campus": "string", "team_members": ["string"], "submission": { "service_url": { "url": "string", "status": "submitted|pending", "submission_date": "datetime" }, "github_frontend": { "url": "string", "visibility": "public|private", "status": "valid|invalid", "submission_date": "datetime" }, "github_backend": { "url": "string", "visibility": "public|private", "status": "valid|invalid", "submission_date": "datetime" }, "pdf_material": { "file_name": "string", "file_size": "number", "file_url": "string", "status": "valid|invalid", "submission_date": "datetime" } }, "evaluation": { "status": "평가 전|평가 중|평가 완료", "score": "number", "reviewer": "string", "review_date": "datetime", "feedback": "string" }, "anomaly": { "detected": "boolean", "anomaly_type": [ "missing_required_items", "oversized_files", "private_repository", "fraud_suspect" ], "severity": "info|warning|error", "description": "string" } } } } }
이와 같은 구조를 가진 페이지를 생성해 주세요.
나온 결과물 ⬇️
확실히 첫 번째 프롬프트로 생성한 것보다 디테일이 많이 생겼다.
팀별 제출 현황에 검색바, 평가 상태 드롭다운도 생성되었고
관리 미트볼 버튼, 이상발견 열, 깃허브 열도 새로 생겼다.
상단의 이상발견 탭에는 이상 발견의 경우의 수도 보이는 디테일이 추가되었다.
JSON 형식의 좋은 점은 데이터 구조가 명확하게 분리된다는 점이다.
각 정보옆에 아이콘 항목도 있는데, 예를 들어 사각형 두 개가 겹친 아이콘은 복사를 의미하는 것처럼 AI 프로토타입이 추천해 준 아이콘이 "사람들이 보편적으로 아이콘에 대해 인식하는 것"을 나타내서 많이 참조했었다.
혼자 기획+디자인을 같이 해야 하다 보니, 아이콘의 의미를 하나씩 생각하고 넣고 하면 작업 시간이 많이 걸렸을 것 같은데 AI를 활용해서 자잘한 시간도 단축할 수 있었다.
html.to.design 플러그인을 활용하면 Lovable 페이지를 그대로 피그마에 옮겨올 수 있다. 한 달에 10번 무료인데, 만든 분에게 감사인사를 드리고 싶을 정도로 혁신적인 툴이다. 조금 깨지는 것도 있지만 피그마에 프레임/그룹화가 다 되어서 옮겨오기 때문에 빠르게 작업하는 데에 효과적이다.
3) 제품을 시연하며 2차 IDI 진행하기
해당 프로토타입을 기반으로 1차 페이지를 완성한 후에 회의를 한번 더 진행했다. CTO님과 함께 진행해 최종 확정이 지어지는 자리였다. CTO님은 기술과 사용성 관점에서 많이 봐주셨고, 커뮤니티팀은 당일 현장에서 사용할 관점으로 많이 봐주셨다. 이해관계자에 따라서도 필요한 게 다를 수 있다는 걸 체감했던 시간이었다.
2차 IDI를 통해서 제외할 항목/아코디언 안으로 넣을 항목/밖으로 뺄 항목들을 결정지었고 이를 반영해 최종 디자인을 완성했다.
4) 최종 완성 및 개발
어드민 페이지라 전부 공개는 못하지만, 최종 페이지는 아래와 같다.
이 페이지가 아코디언, 다운, 엑셀, 페이지네이션 등 까다로운 요소가 참 많았는데 별말 없이 개발해 준 프런트 & 백엔드 팀원 덕분에 무사히 개발까지 완료할 수 있었다.
이제 대망의 해커톤 당일.
우리는 과연 무사히 행사를 끝낼 수 있을까..?
다음 편에 계속됩니다!
