이미지 편집 기능 추가

이미지 편집 기능을 추가했다. 이제는 작성 페이지 내에서 이미지를 자르거나, 텍스트를 추가하는 등의 편집을 할 수 있다. 기존에 고정된 너비(360, 600, 720)만 선택할 수 있던 것에 비하면 많이 나아졌다.

이번 구현에서는 Arc 브라우저에 있는 이미지 편집 기능을 많이 참고했다.

Arc 브라우저에서는 이미지 추가, 텍스트, 화살표 등 다양한 이미지 편집 기능을 제공하는데, 위 사진과 같이 해당 영역을 강조하는 콜아웃 형태의 네모 박스를 만들 수 있다. 기술 블로그를 하면서 정말 잘 사용했던 기능이라서, Sprinters에도 해당 기능을 먼저 넣게 되었다.

Arc 브라우저와 동일하게 네모난 강조 영역을 만들고 색상을 선택할 수 있다. 여기서 추가로, 모서리도 약간 둥글게 만들 수 있다.

이번 구현은 특히 엣지 케이스들이 많아서, 검토하는 데 애를 많이 먹었다. 라이브러리 없이 AI의 도움을 받아 구현을 했기 때문에 많은 상황들을 생각하고, 직접 테스트를 하며 보강했다.

이미지를 자른 후에 텍스트의 크기나 위치는 어떻게 처리할지 고민을 많이 했고, 텍스트를 적용했을 때 위치가 다르거나 품질이 떨어지지 않도록 노력했다.

편집 도구는 모바일 화면에서 여러 한계가 있었다. 결국 이미지 편집은 데스크톱에서만 가능하도록 만들었다. 요즘은 모바일 사용성에도 많은 노력을 해보고 있는데, 여러 한계 때문에 추가하지 못하는 경우가 많다. 이래서 모바일 네이티브 앱으로도 출시하나보다.(모바일은 특히 키보드가..)

이제 막 만들어서 추가할 것들도 많다. 우선 고정 너비 선택지를 더 늘려서 이미지 편집 도구에 추가하고 싶다. 그리고 화살표, 번호, 원형 도구까지 추가하려고 한다.

실제로 '잘 동작하는 도구'를 만든다는 게 참 힘들다. 단순히 동작하는 거에서 끝나면 좋겠지만, 신경써야하는 요소들이 굉장히 많구나라는 걸 느꼈다. 역시 겉으로는 단순해 보여도 내가 직접 해보면 다르다는 걸 이번에도 느꼈다.