모펀의 #39CC 행사 페이지 개발에 참여했습니다
in Programming
2020년 11월 개최된 #39CC 행사의 페이지 개발에 참여했습니다. 총 두 명이서 개발했고 저는 React를 사용하여 프론트엔드 파트를 작업했습니다. 외부 CSS 템플릿 안 쓰고 레이아웃부터 버튼까지, 처음부터 끝까지 CSS를 일일히 다 짰는데 이게 정말 미련한 짓이었다는 걸 프로젝트 끝에 가서야 깨달았습니다. 개발 사이즈에 비해 삽질을 너무 많이 해서 개인적인 아쉬움이 남는 프로젝트였네요.
#39CC는 모펀(MoFun)에서 주최한 하츠네 미쿠 일러스트 공모전 행사입니다. 미쿠 외 다른 피아프로 캐릭터들로도 참여가 가능했지만 참가작 그리고 수상작 대부분이 미쿠였기 때문에 미쿠 온리 행사라고 봐도 무방하겠네요. 2020년 11월부터 일러스트 모집을 받기 시작해서 다음 년도 초에 유저 투표를 받았고, 2021년 3월 1일에 결과 발표를 끝으로 마무리되었습니다. 비록 사모당펀은 폐업했지만 이런 서브컬쳐 관련 행사도 추후 꾸준히 열리지 않을까 기대가 됩니다.
개발에 가장 어려웠던 점으로 다국어 처리를 꼽을 수 있겠습니다. 행사 특성 상 한국, 미국, 일본 세 국가에서 일러스트 제출을 할 수 있어야 했으므로 각 언어에 맞게 페이지를 전환할 수 있어야 했습니다. 일단 React의 i18next를 사용하여 다국어 텍스트 전환 자체는 원활하게 진행했습니다. 하지만 한국어 기준으로 레이아웃을 맞춰 뒀던 다이어그램이 일본어로 가면 내부 텍스트가 길어져서 깨지거나, 분명 한 줄짜리 버튼인데 영문 텍스트가 너무 길어서 두 줄짜리로 변하는 등 세세하게 손 봐야 할 부분이 아주 많았습니다.
특히 이 다국어 표시 문제가 반응형까지 가게 되면 상황이 참 골때리는데, 특정 다국어 텍스트 길이 때문에 반응형 처리를 한 레이아웃이 다 깨지고 무너지는 일이 빈번하게 일어났습니다. 되는 대로 스파게티처럼 짜여진 CSS, 텍스트 길이가 제멋대로인 다국어 텍스트, 그리고 어떤 width든(280px~1920px) 다 잘 표시되어야 하는 반응형 조건의 그야말로 삼중 환장 콜라보. 특히 CSS 작업 초기에는 PC 사이즈 먼저 작업하고 그걸 모바일 페이지로 맞추곤 했는데… 수평으로 다 작업해 둔 DOM들 다시 분해해서 수직으로 배열해야 하는 등 난리도 아니었습니다.
결국 기나긴 삽질을 통해 어떻게든 해결하긴 했지만 나중에 이런 상황을 다시 겪고 싶지는 않습니다. 개인적으로 이번 프로젝트로 배웠던 점을 꼽자면-
- 소규모 프로젝트는 웬만하면 CSS 템플릿 쓰자. 배보다 배꼽이 더 커진다
- 다국어가 끼어들어가면 FE쪽 레이아웃 잡기가 생각했던 것보다 훨씬 어려워지므로 페이지 초안 확실히 잡고 가자
- 반응형 작업할 때 모바일 페이지 먼저 작업하는 게 낫다. 화면이 커지면 배열만 다시 하면 되지만 반대로 작아지는 경우 구조 자체를 다시 짜야 할 수도 있다
- …외주로 FE 개발은 웬만하면 잡지 말자(?)
정도가 되겠습니다. 그래도 취미와 연관이 있는 프로젝트다 보니 개발 자체는 재미있게 했어요. 제가 만든 페이지에 금손 분들의 작품이 올라가는 과정을 보는 게 참 뿌듯하기도 했고요. 기억에 남을 만한 덕업일체 프로젝트였습니다.
내용과 관련은 없지만 저는 보컬로이드 음악 중에 2014 유키미쿠 공식곡 好き！雪！本気マジック를 제일 좋아합니당ㅎ
