[회고] LOACUT | 로생네컷 개발 회고

취업 후 첫 사이드 프로젝트로 LOACUT | 로생네컷 을 개발하는 첫 사이드 프로젝트를 진행하고 AWS에 배포까지 완료하였다.

 

현재까지 약 1,200명의 유저가 로생네컷을 이용해주었다

처음 이 프로젝트를 기획했을 때 유저들이 포토샵 또는 이미지 에디터를 사용해서 인생네컷을 제작하는 걸 보았는데, 포토샵이나 이미지 에디터에 익숙한 사람이라면 괜찮을텐데, 대다수의 로스트아크를 플레이하는 유저들이 포토샵에 익숙하지 않거나, 이미지 에디터를 사용하려면 이미 잡혀있는 틀이 필요하고 또는 그 이미지 에디터 사이트에 가입을 해야하거나 금액을 지불해야 하는 경우가 있기 때문에

 

프로젝트의 키워드는 "포토샵 없이 간단하게" 였다.

 

유저가 직접 만든 로생네컷

유저가 직접 만든 로생네컷

 

모든 작업들은 프론트에서 처리하기 때문에 백앤드 서버가 필요가 없었고, react-cropper 와 dom-to-image 를 사용하여 개발작업을 착수했고, 역시나 제일 익숙했던 Next.js를 사용했다. 아무래도 디자이너 없이 진행한 프로젝트다보니 UI/UX는 후에 개선이 필요하겠지만, 현재까지 반응이 생각했던 것보다 좋다. 그래서 계속 버전관리를 하면서 프레임 추가 및 리팩토링을 진행할 예정이다.

 

로생네컷을 구글에 검색했을 때 유저들이 직접 만든 이미지도 간간히 보이는 것 보니 만들기 참 잘한거 같은 프로젝트이다.

 

+ 2023-03-15 추가

 

모바일에서 dom-to-image가 제대로 작동하지 않는 현상으로 모바일에서 이미지를 넣고 이미지를 생성하는 과정에, 이미지 전체가 들어가지 않은 상태에서 dom-to-image가 실행되어 이미지가 하나만 들어가거나 전부 들어가지 않는 이슈가 발생하였다.

dom-to-image에서 html2canvas로 라이브러리를 변경 후, 핫픽스 작업을 진행하였다. 모바일 뷰 업데이트 전 QA를 진행했을 때 없던 현상이라 당황했지만 빠르게 대안을 찾아 모바일에서 이용하는 유저들의 불편함을 빠르게 개선할 수 있게 노력했던 이슈였었다.

보통 ios safari / chrome에서 일어나는 현상이라고 하는데 아직 발생 원인은 정확하게 파악하지 못하여서

정확한 원인 파악 후 블로그에 정리할 예정입니다.

 

https://github.com/tsayen/dom-to-image/issues/343

 

https://loacut.site/