“벌써 인턴 생활이 끝나는 달이 다가왔다. 프로젝트를 마무리하려고 하니 더 효율적인 코드로 문제를 해결할 방법을 생각하기 시작했다. 이렇게 고민하다 보면 이후 프로젝트에서는 지금보다 조금 더 효율적인 코드를 짤 수 있지 않을까?
이번 일지가 인턴 생활의 마지막 일지가 되리라 생각하니 그동안 인턴 생활을 한 번 더 되돌아보게 되는 것 같다. 짧은 기간이지만 많은 것들을 배우고, 고민하는 시간이었다. 혹시 누군가가 데일리펀딩 인턴 지원을 망설이고 있다면, 주저 없이 지원하라고 말해주고 싶다.”
[ 내가 작성한 코드를 다시 보며 ]
어느 정도 큰 기능들을 다 갖추고 난 다음, 사용자 매뉴얼과 테스트 시나리오를 작성하는 시간을 가졌다. 꼼꼼하게 내가 만든 사이트에서 사용자와 테스터가 할 수 있는 모든 경우의 수를 생각하다 보니 이전에 개발할 때 보지 못했던 부분들이 보이기 시작했다.
어떤 부분은 내가 작성한 코드대로 동작한다면 사용자에게 너무 많은 지연시간을 주기도 했으며, 사용자가 여러 번 잘못된 입력을 한다면, 구현되지 않는 기능들도 보였다. 사용자가 웹을 사용하면서 충분히 일어날 수 있는 일이었지만 그동안 특정 기능을 완성시키는데 집중하다 보니 미처 생각하지 못했던 부분들을 해결하느라 한 달을 보냈다.
# 문제 1 - “자동 입력 방지 문자를 입력하세요”
[문제]
스크래핑 하는 한 사이트에서 비밀번호를 5회 이상 틀릴 경우 자동 입력 방지 문자를 입력해야 로그인할 수 있다.
[해결 방법]
자동 입력 방지 문자가 있을 경우 로그인을 할 때 파라미터 값으로 자동입력 방지 문자에 대한 정보를 같이 보내준다.
다음과 같이 문제를 해결할 수 있다.
- 로그인 시도 전에 자동 입력 방지 문자 이미지가 있는지 확인한다.
- 자동 입력 방지 문자 이미지가 없는 경우 원래의 방법으로 로그인한다.
- 자동 입력 방지 문자 이미지가 있는 경우 해당 웹 사이트에서 자동 입력 방지 문자 이미지를 다운로드한다.
- 카카오 OCR API를 이용해 다운로드한 이미지를 TEXT로 변환하여 추출한다.
- 로그인을 시도할 때 OCR API를 이용해 추출한 TEXT 값과 이미지 id 값을 로그인 파라미터에 넣어 함께 보내준다.
[참고]
OCR(OPtical Character Recognition) API는 이미지에서 문자라고 판단되는 부분을 문자 영역으로 추출한 후, 해당 영역의 문자를 텍스트 정보로 변환시켜주는 API다. 요청이 성공하면 응답 바디에 JSON 객체로 감지된 문자 영역과 텍스트 정보를 포함한다. (출처 : https://developers.kakao.com/docs/latest/ko/vision/dev-guide#ocr)
[OCR을 살펴보며 궁금해진 점]
구글에 로그인할 때 아래와 같이 이미지를 선택을 통해 로그인하는 것을 보았는데, 만약 스크래핑하는 사이트에서 이와 같은 로그인 방식을 이용한다면, 어떻게 스크래핑 해야 할까? (민우님께 질문)
답변
- 자동 입력 방지 문자처럼 텍스트 이미지를 가지고 텍스트를 입력하라고 하니 그걸 분석하는 OCR 과 같은 로봇들이 등장함. 이렇게 로봇들이 뚫어버리는 것을 막기 위해 문제를 더 어렵게 바꾸면서 아래와 같은 사진이 등장.
- 아직 이것을 뚫는 로봇은 존재하지 않음
- 처음 개발할 때 로봇을 방지하기 위한 로직을 강하게 할 것이냐, 아니면 느슨하게 하되, 어느 정도의 로봇의 유입을 허용할 것이냐 선택해야 함!
# 문제 2 - “PNG 이미지를 JPG로”
[문제]
카카오 OCR API가 다운로드한 자동 입력 방지 문자 이미지를 인식하지 못함.
[해결방법]
다운로드한 PNG 형식의 이미지의 배경을 변경하여 JPG 형식으로 변환한다.
다운로드한 이미지는 배경이 투명한 이미지다. PNG 형식의 이미지 파일은 투명한 배경을 인식할 수 있지만, JPG 형식의 이미지 파일은 투명한 배경을 인식하지 못한다. 그래서 PNG 이미지 파일의 배경을 다른 색으로 변경한 후 JPG 형식으로 API를 요청하니 텍스트 추출이 잘 이루어졌다. 아래 코드를 이용해 PNG 이미지 배경색을 바꿀 수 있다.
[ UX 고도화 작업 ]
나름대로 테스트 시나리오를 꼼꼼하게 적어가면서 빠진 부분이 없이 개발을 진행했다고 생각했는데, 사용자 경험을 생각하다 보니 또 많은 수정사항이 필요했다. Daily Now에서 이제 벗어날 수 있다고 생각했는데… 벗어날 수 없는 Daily Now. ? 남은 기간 UX 고도화 작업을 진행하기로 했다. 우선 UX 고도화 작업이 필요한 부분을 리스트 형식으로 작성했는데, 수정이 필요한 부분이 24가지나 있었다….! 다시 수정해야 할 부분이 너무 많다는 사실에 절망했지만, 이후 UX 초고도화, UX 초초고도화 작업이 또 진행되지 않도록 지금 열심히 Daily Now 사이트를 수정해가고 있다! 귀찮아서 대충 구현했던 부분들을 결국 다시 다 수정해야 했는데, 그냥 처음부터 꼼꼼하게 하는 편이 더 편할 것 같다는 생각이 든다....?
[ 마지막 인턴 일지를 작성하며 ]
처음 인턴 생활을 시작할 때는 4개월이라는 시간이 너무 길게만 느껴졌는데, 차근차근 개발을 진행하다 보니 벌써 인턴 생활을 마무리해야 하는 시간이 다가왔다. ‘조금 더 잘 해낼 수 있었을 텐데.’ 하는 아쉬움과 결과물을 만들었다는 뿌듯함이 공존하는 것 같다. 여전히 모르는 것들이 너무 많지만, 그래도 이제 장고를 처음 접하는 친구들이 질문하면 대답해 줄 수 있게 되었다! 백엔드 직무가 어떤 개발을 하는지도 모르고 시작한 인턴 생활이었지만, 지금은 직접 개발부터 배포, 테스트까지 개발의 전 과정을 경험해보면서 정말 많이 배우고 성장할 수 있었다. 아직도 모르는 것들이 너무 많아 아직도 내가 좋은 개발자가 될 수 있을지 의심스럽지만? 지금처럼 하나하나 배워나가 동료들이 함께 프로젝트 하고 싶어 하는 개발자가 되고 싶다.