웹드루아 - 웹 개발자 드루아

정말 너무 뒷북이지만 큐시즘 31기 기업 프로젝트 회고를 작성하고자 합니다ㅎㅎ 바야흐로 2개월 전 큐시즘 31기에서 한국방송광고진흥공사와 협업하여 기업 프로젝트를 진행했습니다. 큐시즘 30기에서도 프론트엔드 파트로 활동했던지라 벌써 두 번째 기업 프로젝트입니다! 기업에서 실제로 고민하고 있는 문제와 기업의 업무 방식을 간접적으로 체험할 수 있어 큰 도움이 되는 활동이라고 생각합니다. 30기에서는 렛츠커리어라는 회사와 기업 프로젝트를 진행했는데, 이 경우에는 렛츠커리어 PM님 그리고 대표님과 주기적으로 소통하고 멘토링을 받으며 진행해서 큰 도움이 되었습니다. 살짝 아쉬운 점은 결과를 확인할 수 있는 기간이 큐시즘 활동이 끝난 후여서 회사 관계자 분과 소통을 계속 해야 한다는 것입니다. 그래서 전 멘토링 해주셨던 PM님께 계속 연락드리고 유저 데이터를 받고 싶다고 말씀드려 그 데이터를 받을 수 있었습니다. 그리고 회사 측에서 코드를 공개하지 않길 원해서 좀 더 열심히 개발하여 그 과정에서 수치적인 인사이트를 얻어야 한다는 점도 살짝 아쉬웠습니다. 그래도 회사의 입장에서 유저를 생각하고, 문제점을 함께 고민할 수 있는 경험은 정말 값진 경험이었습니다. 그래서 코바코(한국방송광고진흥공사)와 함께하는 기업 프로젝트도 큰 기대를 가지고 시작을 했습니다. 그리고 결론적으로 이야기하면 31기에서의 기업 프로젝트도 값진 경험을 얻을 수 있었습니다. 서론이 길었네요. 어떤 부분을 고민하여 작업을 했고, 어떤걸 구현했고 그 과정에서 무엇을 얻었는지 작성해 보겠습니다!

어떤 문제를 해결해야 했는가?

우리는 코바코의 '아이작'이라는 AI 광고 스토리보드 제작 관련 일부 기능을 개선하여 사용자 유입을 높이자라는 목표를 가지고 기업 프로젝트를 진행했습니다.

아이작은 어려워 보이는 광고 제작 과정을 AI에 기반하여 지원해주는 서비스입니다. 사용자들은 아이작의 광고 아카이브 키워드를 통해 광고를 탐색할 수 있고, 소비자 트렌드를 파악할수도 있습니다. 그리고 제일 유용한 기능은 광고 카피 제작 기능입니다. 누구나 손쉽게 만들 수 있는 AI 기반의 광고 카피 제작 서비스를 무료로 제공해 주어서 빠르고 편리하게 광고 카피를 제작할 수 있습니다. 또한 이를 기반으로 AI를 통해 이미지를 만들어 스토리 보드 제작까지 도와주는 서비스인데요.

우리는 해당 서비스의 제작 관련 일부 기능을 개선하고 리팩토링하여 사용자 유입을 높이는 것이 목표였습니다.

우리는 어떻게 접근했는가

우선 해당 서비스를 이용하는 사용자들이 원하는 부분이 다른데 이에 비해 방대한 기능을 한번에 모두 제공하기 때문에 사용자가 원하는 작업을 하는 과정까지 가기에 어려움이 있다고 생각했습니다. 이 부분을 충족시켜 줄 수 있는 방식을 제안하고자 온보딩 과정에서의 사용자 유형 세분화, AI이미지 조합 방식에 대한 추가적인 기능을 고안하여 기획팀은 기획과 기능명세서 및 와이어프레임을 만들고, 디자인 팀은 그에 맞춘 디자인을 개발 팀은 이를 기반으로 개발을 시작했습니다. 너무 당연한 이야기죠?ㅋㅋㅋㅋ 어쨌든 이 과정에서 AI가 만들어주는 이미지를 받을 캔버스를 구현해야 했고, 이를 구현하기 위해 Fabric.js를 선정하여 개발을 들어갔습니다. 이때까지만 해도 캔버스 구축이 어렵지 않을것이라 생각했죠...

쉽지 않은 Fabric.js...

정말 쉽지 않았습니다. 자잘하게 이야기 하기는 양이 너무 많아 크게 겪었던 문제와 어떻게 해결했는지를 작성하겠습니다. 사실 fabric.js는 커스텀을 자유자재로 할 수 있는 장점이 있습니다. 하지만 고려해야 하거나 공부해야 하는 API가 너무 많고, 그에 대한 공식문서의 설명이 구체적이지 않아서 계속해서 여러번 시도해서 그 결과를 확인하며 캔버스를 구현해야 했습니다. 그 과정에서 캔버스 오염이라는 정말 큰 문제를 겪었습니다.

캔버스 오염(Tainted Canvas) 문제란?

캔버스를 구현할 때, 외부(다른 도메인)에서 가져온 이미지를 캔버스에 그리면, 브라우저 보안 정책(CORS) 때문에 캔버스가 "오염(tainted)"될 수 있습니다. 오염된 캔버스에서는 toDataURL(), toBlob(), getImageData() 등 픽셀 데이터를 추출하는 메소드 사용 시 아래와 같은 에러가 발생합니다.

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.46

이 현상은 외부 이미지가 적절한 CORS 설정 없이 로드될 때 발생하며, fabric.js를 쓸 때도 동일하게 적용됩니다.

이러한 캔버스 오염이 발생하는 이유는 다른 출처(Origin)에서 이미지를 불러올 경우와 서버가 Access-Control-Allow-Origin 헤더를 제공하지 않거나, 클라이언트에서 이미지에 crossOrigin 속성을 지정하지 않은 경우 발생합니다.

우리는 AI가 만들어준 이미지가 외부 출처이기에 계속해서 이미지가 들어가지 않는 문제가 생겼고, 이를 

const imgObj = new Image();
imgObj.crossOrigin = 'anonymous';
imgObj.src = imageUrl + '?v=' + new Date().getTime();

이렇게 이미지 객체를 만들어 crossOrigin에 anonymos를 넣고, 캔버스 내에서의 중복을 방지하기 위해 쿼리스트리을 추가했습니다. 이렇게 하여 처음 캔버스 오염 문제를 해결했습니다.

하지만..!

이후에도 캔버스 오염 문제를 맞닥뜨렸습니다. 그 이유는 AI가 만든 이미지 뒤에 쿼리 스트링이 있기 때문에 쿼리스트링이 있는 상태에서 ?v ~를 붙이며, 캔버스에서 해당 이미지를 받지 않았었습니다. 확장성을 고려하지 못한 제 문제였죠...ㅠㅠ 하지만 시간이 없었기에 프론트 측에서 코드를 바꾸는 것이 아니라 AI에서 생성되는 이미지에 쿼리스트링이 추가되지 않게 설정하여 문제를 해결했습니다.

이렇게 AI 이미지를 받아서 편집하고 그 이미지로 또 다른 AI 이미지를 생성할 수 있는 캔버스를 구현할 수 있었습니다.

회고

하고 싶은 이야기들이 훨씬 더 많은데, 우선 1차적으로 빠르게 적느라 빠진 이야기들이 많네요..ㅠㅠ 이번 프로젝트에서 아토믹 디자인 패턴과 스토리북을 도입했지만 제대로 사용하지 못한 점도 아쉽고, 개발 과정에서 스케줄링을 잘못해서 개발 일정이 매우 촉박하기도 했었습니다. 그리고 개발 프로젝트를 시작하기 이전에 사용하고자 하는 라이브러리 및 기술에 대해서 깊은 이해를 가지고 시작해야 훨씬 수월하게 원하는 기능을 만들 수 있다는 것을 몸으로 깨달았습니다..ㅎㅎ 어쨌든 이를 기반으로 기업에서 직접 발표를 했고, 유저 유입을 높이기 위해 타겟을 세분화 했다는 것을 코바코 측에서 긍정적으로 받아들였고, 기능에 대해 칭찬도 받아서 정말 뿌듯했습니다. 이후 조금 더 잘 정리해서 업데이트 하겠습니다..ㅠㅠ 기업의 입장에서 문제를 바라보고 함께 해결할 수 있는 메리트가 정말 큰 거 같습니다! 여러분도 기회가 된다면 큐시즘을 해보시는걸 추천드립니다!! 읽어주셔서 감사합니다 :)