최근 프로젝트에서 사용자가 직접 손글씨를 쓰고, 이를 인식해서 통과/불합격을 판단하는 기능을 개발했다. 생각보다 많은 시행착오가 있었는데, 이번 글에서는 내가 겪었던 문제들과 해결 과정을 공유하려고 한다.

1. 스팩 정의

기능 스팩

사용자가 제시된 이미지를 보고 따라 그리면, 서버의 OCR API가 그림을 분석해서 정답 여부를 판단하는 기능이다.

1. 사용자가 이미지를 따라 그린다.
2. 따라 그린 이미지를 서버에 전송하여, 사용자가 그린 글자/단어를 체크한다.
3. 결과값을 보내준다. 잘 그렸다면 통과처리한다.

개발 스팩

1. canvas를 이용하여 사용자가 그림을 그릴 수 있게 한다.
2. 서버에서 만들어둔 OCR API를 이용하여 그림을 보내면, 글자를 서버에서 읽어 보내준다.
3. 서버에서 보내준 글자를 바탕으로 통과/불합격을 처리한다.

2. 개발

1. 이미지를 꽉차게 프레임 만들기

<div position='relative'>
	<img width='100%' height='100%' />
	<canvas position='absolute' />
</div>

• img의 width와 height를 100%로 설정하면, 부모 컴포넌트는 이미지의 사이즈에 맞게 사이즈가 설정된다.
• 그 다음, canvas태그는 absolute로 띄울 것이다. 그리고, 부모 div 태그는 relative로 설정하였기에 canvas는 부모 div태그에 의해 위치가 결정이 된다.