피코노스아시아 'Compose Camp' 온라인 개발 캠프 플랫폼 UX/UI 구축

함께 모여 각자 코딩하는, 'Compose Camp'

혼자 듣는 온라인 학습은 집중력이 흐려지고 중도에 포기하기 쉬웠고, 단순 VOD 수강만으로는 실시간 수업과 코딩 실습이 이어지기 어려웠습니다.
또한 코딩하며 피드백을 주고받을 곳도 필요했습니다. 이에 수업, 실습, 소통이 한곳에서 끊김 없이 이어지고 함께 공부하는 느낌을 주는 온라인 캠프 플랫폼을 목표로 했습니다.

먼저 타이머, 캠·화면 공유, 개인 코딩 영역을 한 화면에 담은 '모여서 각자 코딩하기(모각코)' 가상 스터디룸을 설계해 현장감을 살렸습니다.
학습 코스 확인, 실시간 수업 참여, 모각코, 과제 제출까지 물 흐르듯 이어지는 간결한 흐름을 만들었습니다. 수업 중 질의응답, 코드 리뷰, 수강생 간 대화는 메신저형 팝업으로 한곳에서 할 수 있게 했습니다.

마지막으로 오래 봐도 눈이 편한 차분한 색상, 코드가 잘 읽히는 글꼴, 가상 스터디룸 구성 요소를 담은 온라인 학습 전용 디자인 시스템을 만들었습니다.
코스별 학습 대시보드, 실시간 수업 페이지, 모각코 스터디룸, 동료 학습자 상태 화면 등 핵심 화면을 완성하여, 수강생이 끝까지 몰입해서 학습을 이어갈 수 있는 환경을 만들었습니다.

Key Features

- 타이머·캠·화면 공유·코딩 영역을 담은 모각코 가상 스터디룸
- 코스 확인부터 과제 제출까지 간결한 학습 흐름
- 메신저형 질의응답·코드 리뷰 소통 기능
- 동료 학습자 상태를 보여 주는 모니터링 화면
- 코스별 학습 대시보드와 실시간 수업 페이지
- 눈이 편하고 코드가 잘 읽히는 온라인 학습 전용 디자인 시스템