Overview
친구들과 함께 크로키 모임을 진행하던 중, 모든 것을 수동으로 진행하는 것이 번거롭게 느껴져 웹 서비스를 만들게 되었다. 지원하고자 했던 기능은 다음과 같다.
- 크로키 세션 진행
- 크로키 결과물 공유
- 날짜별 크로키 기록
기본적으로 적은 인원이 참여하는 크로키 모임이라서 번거로운 회원가입 등의 절차는 생략했다. 유료 서비스를 사용하고 싶지 않았기 때문에 집에 구축되어 있는 홈서버를 활용하여 서비스를 배포했다.
1. 기획 컨셉 & 핵심 기능
크로키 업로더의 핵심 목표는 ‘매끄러운 세션 진행’과 ‘쉬운 결과물 공유’이다.
주요 기능
- 세션 만들기:
- 호스트가 오늘 그릴 레퍼런스 이미지들을 드래그 앤 드롭으로 간편하게 업로드한다.
- 뷰어에서 각 이미지별로 노출 시간(타이머)을 분 단위로 설정할 수 있다.
- 크로키 플레이어:
- 세션이 시작되면 전체 화면으로 전환되며, 설정된 시간에 맞춰 이미지가 슬라이드쇼처럼 자동으로 넘어간다.
- 화면 하단에는 남은 시간을 직관적으로 보여주는 프로그레스 바와 타이머가 오버레이된다.
- 일시정지, 다음 이미지 넘기기 등 필수적인 컨트롤도 제공한다.
- 결과물 공유:
- 타이머가 끝나고 세션이 종료되면, 자신이 그린 크로키 결과물을 업로드할 수 있는 화면이 나타난다.
- 갤러리 & 캘린더:
- 과거에 진행했던 세션들을 날짜별로 모아볼 수 있다.
- 해당 날짜에 누가누가 참여해서 결과물을 올렸는지 한눈에 확인할 수 있다.
- 개인 페이지:
- 과거에 업로드한 크로키 결과 이미지들을 모아볼 수 있다.
요약은 위와 같고, 상세한 페이지 소개를 이어서 하겠다.
홈서버를 이용하기 때문에 무분별한 업로드를 막고 싶었다. 그래서 회원가입 없이 ID를 배부하는 방식의 로그인 기능을 추가했다. ID와 비밀번호는 온전히 내가 관리하고 있다. 굳이 DB를 사용하고 싶지 않아서 간결하게 만든 것도 있다.
로그인을 하면 가장 먼저 보이는 페이지는 갤러리 페이지이다. 갤러리 탭에서는 과거에 업로드한 모든 세션의 날짜별 섬네일과 참석자를 확인할 수 있다. 섬네일을 클릭하면 해당 세션의 상세 페이지로 이동한다.
캘린더 탭에서는 과거에 진행했던 세션들과 참석자들을 한눈에 확인할 수 있다. 빈칸을 클릭하면 새로운 세션을 시작할 수 있게, 세션이 있는 칸을 클릭하면 세션 상세 페이지로 이동한다.
새로운 세션을 생성하는 페이지이다. 호스트가 업로드한 레퍼런스 이미지와 각 이미지별 노출 시간을 설정할 수 있다.
세션 상세 페이지에서는 호스트가 업로드한 레퍼런스 이미지와 제출된 크로키 결과물들을 확인할 수 있다. 세션 시작하기 버튼을 눌러 크로키를 시작할 수 있다.
크로키 플레이어에서는 설정된 시간에 맞춰 레퍼런스 이미지가 슬라이드쇼처럼 자동으로 넘어가고, 화면 하단에는 남은 시간을 직관적으로 보여주는 프로그레스 바와 타이머가 오버레이된다. 일시정지, 다음 이미지 넘기기 등 필수적인 컨트롤도 제공한다.
세션이 마무리되면 자동으로 결과 업로드 페이지로 이동하게 된다.
세션 완료 페이지에서는 자신이 그린 크로키 결과물을 업로드할 수 있다.
마이 페이지에서는 과거에 업로드한 크로키 결과물들을 확인할 수 있다.
마무리하며
이번 크로키 업로더 프로젝트는 안티그라비티를 이용해 볼 겸 바이브 코딩을 해보려고 시작한 프로젝트였다. 생각했던 것 이상으로 편하고 재밌어서 만족스럽게 마무리할 수 있었다. 특히 UI를 구현할 때 최소한의 고민만으로 원하는 결과물을 얻을 수 있는 점이 좋았던 것 같다.
친구들의 피드백에 따라 사운드 알람 기능, 중간 쉬는 시간 (정비 시간) 기능, 서로의 그림에 코멘트를 남길 수 있는 기능까지 확장해 보면 더 좋을 것 같다. 다른 프로젝트를 하다가 시간이 남으면 하게 되지 않을까…!
