동아리 공연 신청 페이지_아임웹 제작기
아임 웹 디발자 #2. 피그마, 아임웹으로 랜딩페이지 만들기
동아리 공연 페이지! 제가 만들게요~!
# 프로젝트 작업 동기
제 취미는 뮤지컬입니다. 일주일에 한 번 정도 참여하는 직장인 동아리 활동을 하고 있고, 매 년 1번이나 2번 정도 공연을 했습니다. 업무에 치이며, 스트레스받는 직장인들이 옹기종기 모여 연습하고, 친구나 가족을 불러 잔치를 여는 느낌이지만, 나름 무대에 올라가는 경험은 짜릿합니다. 참여자들이 사비를 털어서 준비하는 공연이기 때문에, 준비하는 과정에 참여자들의 기여가 중요합니다. 열심히 공연을 만들기 위해 재능 기부하는 분들을 보고만 있다가, 저도 도움이 되고 싶어서 공연 소개 페이지를 만들었던 경험을 나눕니다. (제작 날짜는 2023년 3월에 진행됨)
# 제작 기간 및 방식
동아리 공연 페이지는 피그마, 아임웹 조합을 채택했으며, 부분적인 일러스트 디자인은 생산 AI 'Midjourney (미드저니)'를 활용했습니다.
제작 기간은 총 2.5일이었고, 실제 QA를 하면서 모바일에 최적화되지 않은 부분들을 개선하면서 2~3일 작업이 추가되며 완성되었습니다. 레퍼런스 분석 0.5일, 피그마 디자인 1일~2일, 아임웹 제작 및 QA 1~2일 정도 걸렸습니다.
*배우 프로필, 포스터는 별도 제작자가 있어서 해당 자료를 모바일에 최적화하기만 했습니다. :)
# 요구사항 분석 및 레퍼런스 리서치
동아리 공연 등은 별도의 티켓 구매나 신청 시스템을 사용하고 있지 않아 사전 참석률 및 인원을 파악하기 어려운 부분이 있다고 했습니다. 따라서 웹 사이트를 통해서 공연에 대한 정보를 충분히 제공함은 물론 참석 의사 확인을 할 수 있도록 아임웹 백오피스와 연동되는 입력 폼을 하나 추가했습니다.
또한 나름 공연의 홍보페이지이기에 실제 연극이나 뮤지컬의 소개 포스터를 찾아보면서, 꼭 들어가야 할 정보들을 취합해 디자인했습니다. 여러 가지 레퍼런스를 찾아보니 티켓 페이지에 들어가는 소개 정보들이 유사한 구조를 가지고 있어서 비슷한 정보 구조를 사용하게 되었습니다.
배우들이 행사 링크를 친구/지인들에게 카카오톡으로 공유할 확률이 높다 보니, '모바일'에서 진입할 확률이 높았습니다. 따라서 슥슥 넘기더라도 잘 보이도록 할 필요가 있었고, 내 친구나 가족이 공연을 준비하는 영상, 사진을 둘러보면서 마지막에는 배우들에게 응원 메시지도 남길 수 있도록 게시판 기능을 추가했습니다.
여담으로 응원게시판은 정보를 읽지만 하지 말고, 재미와 참여 목적이었는데 거의 인기투표급의 뜨거운 호응을 받아 결과적으로 재밌는 상황이 되기도 했습니다.
# 미드저니.. 지금은 괜찮니?
참고로 당시 미드저니는 구 버전이어서, 이미지 생산을 요청하면 손가락 등을 제대로 구현 못하는 부분들이 있었습니다. 현재는 미드저니도 개선이 되었다고 하고, 훨씬 더 사진 같은 결과물이 나온다고 하는데요. 아쉽게도 다시 들어가 보니 유료화가 되어 있어서 재시도는 불가능했습니다.
간혹 예상치 못한 결과가 나오기도 합니다.
관객들이 복사 붙여 넣기 한 것처럼 나왔던..# 아임 웹 디발자의 소감
개인적으로는 생산 AI를 처음으로 적용해 보았기 때문에 의미가 있었던 프로젝트였습니다. 누구를 위해, 무엇을 어떻게 구현할지 기획자로 사고할 수 있고, 어떤 것이 더 나은 것인지 선택할 수 있다면 시각화적인 측면에서는 새로운 UXUI 툴, AI 툴을 실제 업무에 사용할 수 있겠다는 생각이 들었습니다.
(2023.07.16 덧붙임) 당시만 해도 저는 기본적인 아임웹의 템플릿을 수정하거나, 피그마 디자인을 그대로 옮기는 수준만 작업이 가능했는데요. 이후 2회 차 공연 페이지를 또 재작하면서서 HTML/CSS/JS를 코드위젯으로 수정하며 간단한 코딩 작업을 함께하고 있습니다. 작은 시작으로 출발했던 아임웹이었지만, 진지하게 웹 디+발자로 성장하는 것을 느끼고 있습니다. :)
배해나 프로젝트 (배우고 해 보고 나누기)
IT분야 서비스 기획자로 공동체에 작은 기여를 하고 있습니다.
비영리 목적의 단체/행사일 경우 홍보페이지, 웹사이트 제작을 종종 돕습니다.
아쉽게도 모든 프로젝트에 참여하는 것은 아니기 때문에
구체적으로는 관심 있는 주제를 기록합니다.
- 유기동물 보호(유기견, 유기묘)
- 사회적 소외계층을 위한 목적
- 기타 : 교육적 목적에 부합하는 프로젝트
아래 이메일로
단체 소개 자료 / 프로젝트 목표 / 희망 출시일을
간략히 보내주시면 검토 후 연락 드리겠습니다.
협업/제안 :
loreen@selectway.co (셀렉트웨이 김로린)
