안녕하세요, MNC의 인공지능 경진대회 플랫폼 AI CONNECT를 담당하고 있는 신현정입니다. AI CONNECT의 뒷 이야기를 담아내는 커넥트로그의 첫 포스트로, 우리 플랫폼의 UX/UI 리뉴얼 기록을 남겨보려 합니다.
AI CONNECT 는 마인즈앤컴퍼니의 AI 경진대회 전용 플랫폼으로, 지난해 4월 런칭한지 1년만에 약 5,000명의 회원을 확보하며 큰 관심을 모으고 있는 플랫폼입니다. 올해도 저희 AI CONNECT는 10개 이상의 크고 작은 경진대회를 개최했는데요, 특히 사업화 지원금이 무려 40억 규모에 이르는 2022년 인공지능 온라인 경진대회를 개최하며 많은 AI/Data 사이언티스트들이 유입되었죠.
이렇게 큰 대회를 치르고 나니, 우리의 AI CONNECT 플랫폼에 대한 실제 유저의 목소리가 궁금했습니다. 그래서 대회가 끝나고 난 후, 사이트 이용 만족도 조사를 통해 소중한 의견을 청취해 플랫폼 UX/UI를 개선해야겠다는 결론에 도달할 수 있었죠. 그 의견을 반영해 드디어 이번 2022년 12월, AI CONNECT UX/UI 리뉴얼을 진행하게 되었습니다. 인공지능 경진대회 플랫폼이라는, 다소 생소할 수 있는 플랫폼을 다듬어가는 그 과정을 여러분들께 공유드리고자 합니다.
'익숙하지 않은 경험'을 익숙한 사용자 경험으로 풀어내기
회원들의 사이트 이용 만족도를 조사해보니, 공통적으로 느끼는 어려움을 아래와 같이 두 가지로 찾아낼 수 있었습니다.
문제 1. 익숙하지 않은 UXUI에 진입장벽을 느낌
리서치 결과 AI CONNECT에서 개최되는 다른 대회를 참여해본 기존 유저가 오히려 사이트 이용에 더 어려움을 겪는 것으로 나타났습니다. 아무래도 변경된 UXUI 가 익숙하지 않고, 다른 경진대회 플랫폼과는 다른 구조에 진입장벽을 느낀 것으로 예상됩니다.
문제 2. 핵심적인 기능에서 어려움을 느끼고, 주로 스스로 해결함
참가자들이 가장 어려워하는 기능은 대회 및 과제 정보 확인, 규정 확인, 대회 및 과제 참여/참여 취소 등을 선택해주셨습니다. 이는 User journey가 시작되는 지점 즉, 가장 중요하고 핵심적인 기능에서 어려움을 많이 느낀다고 해석했습니다. 아마 경진대회를 꼭 참여하고 싶은 사용자가 아니라면 이 단계에서 이탈률이 높았을 것이라는 위험을 쉽게 예측할 수 있습니다.
더욱 큰 문제는 이러한 문제를 주로 스스로 해결했다는 것인데요. 리서치를 하지 않았으면 이들의 Pain point를 전혀 몰랐을 것입니다.
대회 목록부터 로고까지, 유저 입장에서 다시 생각하기
저희의 UX/UI 리뉴얼은 바로 우리 회원들의 Pain Point에서 시작됐습니다. 그리고 대회 목록부터 대회/과제 상세페이지, 심지어는 로고까지 유저 입장에서 다시 생각한 리뉴얼을 기획하게 되었습니다.
1. 경진대회 목록
참여중인 대회로 바로 접근하는 UI가 불편하다는 사용자 의견이 있었는데요. 메인 화면에서 참여 중인 경진대회에 노출되는 대회 순서를 정리하고, 종료된 경진대회는 보이지 않도록 처리했습니다. 이로써 사용자가 현재 참여 중인 대회에 손쉽게 접근할 수 있도록 변경되었습니다.
UI도 훨씬 깔끔하고 세련되게 변경되었습니다. Font size와 color 간의 위계를 두어 중요한 정보가 강조될 수 있게하고, 불필요한 정보를 숨겼습니다. 적절한 icon과 badge를 활용하여 텍스트가 난무하던 UI에서 좀 더 심플하고 간결한 UI로 개선하였습니다.
2. 대회 상세 페이지
대회 상세 페이지는 텍스트와 정보가 많은 페이지라, 원하는 정보를 한 번에 찾기가 어렵습니다. 기존에 7개의 메뉴로 펼쳐져 있던 GNB를, 관련된 메뉴들을 묶어 3개의 탭으로 정리하여 한눈에 파악하기 쉽도록 개선했습니다. 또한 텍스트가 길게 펼쳐지는 정보에는 아코디언 UI를 활용하여 (대회 규정 등) 은 펼치기를 했을 때만 확인할 수 있게 변경했습니다.
과제 목록은 기존에 Swiper UI 였기 때문에 3개 이상일 경우 한번에 확인하기 힘들었는데요. 변경된 UI에서는 생성된 과제가 한번에 모두 보이게끔 하여, 참여할 과제를 좀 더 쉽게 선택할 수 있게 했습니다. 그리고 참여 중인 과제에는 과제참여중으로 버튼이 변경되게 하여 구분을 주었습니다.
3. 과제 상세 페이지
과제 하위 메뉴는 기존 LNB 형태를 탈피하여 가로 탭으로 펼쳐지는 UI로 변경했습니다. 반응형 모바일 UI를 고려한 선택이었는데요. LNB 메뉴를 사용하게 될 경우 모바일에서는 햄버거 메뉴로 메뉴가 숨겨지게 되는데, 변경된 UI는 모바일에서 Swiper를 통해 모든 메뉴를 한눈에 볼 수 있어 훨씬 편리하게 사용할 수 있습니다.
4. 로고 및 컬러
로고를 타이포로만 심플하게 제작하고, Main color를 지정하여 모든 UI에 공통적으로 적용하였습니다. 기존 UI에는 Color 가 과도하게 사용되고 위계가 없어 통일감이 부족하고 중요한 정보에 집중하기 어려웠는데요. Main color 중심으로 Color System을 재정비하였고, 강조될 내용에는 Main color를, 나머지 UI 에는 Variation Color를 사용하여 전체적으로 깔끔한 디자인으로 개편되었습니다.
AI CONNECT의 진화는 계속됩니다
AI CONNECT는 앞으로도 국내 주요 AI 경진대회를 개최해나갈 것이기에, 플랫폼 역시 지속적으로 진화할 예정입니다. 실제로 국내 AI 경진대회의 유형을 보면 채용 연계형 AI 경진대회, 교육 과정과 연계된 모의 경진대회, 의료 빅데이터 경진대회 등 유형이 점점 다양해지고 있으며, 활용 분야도 확대되는 추세입니다. 이러한 다양한 경진대회의 특성에 적합한 유연한 플랫폼을 만드는 게 저희 커넥트팀의 목표입니다.
2023년에는 AI CONNECT 자체 콘텐츠를 키워 사용자들이 지속적으로 유입되고, 플랫폼 내에서 자신의 역량을 키울 수 있는 구조를 만들어보려 합니다. AI 경진대회가 단순 상금을 겨루는 대회를 떠나 실력 있는 Data Scientist들이 모이고, Skill을 업그레이드하고, 실력을 증명받는 도구가 될 수 있도록 AI CONNECT 가 발판이 마련될 수 있도록요.
2022년에 AI CONNECT의 대회에 참여해주신 모든 참가자분들께 감사드리고, 더욱더 재미있어질 AI CONNECT를 기대해주세요!
'MNC Inside > 커넥트로그' 카테고리의 다른 글
| [커넥트로그] AI가 만든 Fake 이미지 잡는 명탐정들 모인 날! 커넥팅데이 스케치🕵️ (0) | 2023.07.24 |
|---|---|
| [커넥트로그] AI CONNECT, 데이터 사이언스 플랫폼으로 버전 업! (0) | 2023.05.15 |
| [커넥트로그] 유저 매뉴얼 & FAQ 추가 기능 업데이트 및 스프린트 회고 기록 (0) | 2023.02.10 |
| [커넥트로그] 2022 국방 AI 경진대회 해커톤 현장 스케치 (0) | 2022.12.19 |