사용자의 사진을 기반한 컬러링북 도안 제작 & 채색 어플
팀원 1 : 박성오 (20184136) [UI/UX, FrontEnd]
팀원 2 : 고정훈 (20184632) [ML]
팀원 3 : 임태규 (20185999) [Server]
코로나 시기에 맞춰 격리 및 외출 자제의 이유로 개인적으로 시간을 보내는 것이 자연스러워졌다. 더구나 사회성과 독립성을 처음으로 배우는 유치원 아이들은 이번 사태로 바깥세상보다는 스마트폰, 태블릿과 가까워졌다. [한국미디어패널조사]에 따르면, 최근 10대 미만의 미취학 아동들도 절반 정도가 스마트폰을 보유하고 있다. 따라서 최근에는 혼자 재밌게 놀 수 있게 어플들이 각광을 받고 있는 시점에서 유아층부터 성인까지 혼자서도 즐길 수 있는 어플의 필요성이 높아졌다.
최근 20~30대 청년들에게 아트테라피 라는 이름으로 컬러링북이 각광받고 있다. 단순 그림에 색칠하며 머릿속 복잡한 생각을 떨쳐내고 혼자만의 독립된 시간을 가지고 자신만의 색감을 칠한다는 점에서 힐링을 하고 있는 추세이다. 정신과 전문의의 입장에서도 컬러링북을 통한 아트테라피가 정신과 치료에 도움이 된다고 밝힌 바가 있다.
명절을 맞이해 오랜만에 친척들을 만났던 이번 연휴, 조카가 크레파스로 그린 그림을 보게 되었다. 표현하고자 하는 것들에 대해 그림모습까지 비슷하게 그려 내기에는 어려워 보인다. 만약 본인이 표현하고자 하는 캐릭터, 그림이나 인물에 대한 색칠 도안이 있었다면, 아이들도 완성도 높은 그림을 완성시킬 수 있지 않을까? 하는 생각이 들었다.
위와 같은 방식으로 사용자가 원하는 사진을 도안으로 만들어 컬러링을 할 수 있게 한다면 아이들 뿐만 아니라 성인들도 즐겨 찾는 어플리케이션이 될 것이다. 인스타그램 프로필을 새로운 색감으로 재구성하거나, 본인이 찍은 사진을 새로운 색감으로 칠해서 SNS에 공유하는 방식 등으로 다양하게 어플리케이션을 활용할 수 있을 것이다.
남녀노소, 어른아이 가릴 것 없이 재미있게 즐길 수 있는 새로운 컬러링북 기능을 만듦으로써 아동 학습장치로써의 역할과 아트테라피의 역할, 2마리 토끼를 모두 잡는 어플리케이션 효과를 기대해 볼 수 있다.
요즘 그림을 취미로 그리는 사람들에게는 패드가 대세이다. 빠르고 편리하며 펜슬로 간단하게 그림을 그릴 수 있기 때문이다. 또한 스마트 미디어를 사용하는 학부모님들은 아이들의 교육 어플과 영상시청을 위해 패드종류 (아이패드, 갤럭시 탭 등) 를 많이 사용한다. 따라서 패드를 활용한 도면 제작 및 그림 어플을 만들어 보고자 한다.
색칠공부는 스스로 그림을 완성할 능력이 부족한 아이들에게 이미 그려져 있는 그림에 색을 채우게끔 함으로써, 아이가 다양한 색의 종류에 대해 배우고, 자연스럽게 색에 더욱 익숙해져 미적 감각을 키울 수 있으며, 더불어 요즘 같이 각종 매체에 의해 떨어져가고 있는 집중력 능력을 키워 줄 수 있는 매우 건강한 활동이다. 그림부터 그려내는 것보다 훨씬 쉬우면서 다 색칠했을 때의 완성도가 있다는 점에서 아이의 성취감을 이끌어 낼 수 있다.
기존의 색칠공부는 특정 테마의 컬러링북 혹은 어플을 통해서 이미 제작된 도안만을 색칠할 수 있었다. 하지만 인공지능을 통한 이미지 처리 기능을 활용해서, 원하는 사진을 선택하여 선들을 추출하고, 이를 바탕으로 색칠 도안을 얻어낼 수 있다면, 아이가 흥미가 있는 캐릭터나, 혹은 본인 및 가족들의 사진 등을 통해서 언제든지 원하는 색칠 도안을 색칠해 보면서 색칠 활동에 대한 아이의 흥미를 더욱 이끌어낼 수 있다.
현재 사용자들이 이용중인 색칠 공부를 위한 서비스들은 주어진 도안만을 활용 가능하다. 다양한 도안을 통해 아이들의 창의성 증진에 도움을 주고, 좋아하는 캐릭터나 그림, 인물들을 기반으로 한 도안을 색칠하며 색칠 활동에 대한 흥미를 유도할 수 있도록, 원하는 사진을 색칠 도안으로 활용할 수 있게 한다.
출처 : 영유아의 스마트 미디어 사용실패 및 부모 인식 분석 [육아정책연구 제 13권 제 3호(2019.12.) 3~26]
현재 부모님들이 아이들의 스마트 미디어에 대한 시각이 부정적인 부분들이 많다. ‘아이의 사회성 및 인지발달에 부정적 영향이 있을 것 같아서’ 라는 의견의 비율이 50%나 넘는다. 아이가 스마트 미디어로 아트테라피와 아동 학습장치의 효과를 받는다면 부모님들의 스마트미디어에 대한 시각이 긍정적으로 바꿀 수 있다.
IOS16 버전에 추가된 배경제거, 혹은 포토샵을 이용한 색칠 도안 제작과는 차별성이 있다.
- 색칠 도안 변환 기능
IOS16 버전의 사진 편집 기능을 통한 개체 추출은, 개체를 제외한 배경 부분만을 잘라낼 뿐, 해당 사진을 색칠 도안으로 변환할 수 있도록 내부의 세부 선까지 추출할 수 있는 기능은 없다. - 수작업이 아닌 머신러닝을 이용한 자동화
포토샵의 기능들을 사용하여 사진을 색칠 도안으로 변환할 수는 있다. 하지만 이를 위해서는 외곽선 및 내부의 세부 선을 수작업을 통해서 따라 그리는 방식으로 추출하거나, 절차가 복잡한 기술 여러 개를 섞어 사용해 만들 수 밖에 없다. 또한 포토샵의 가격 면에서의 접근성이나 앱 환경으로의 이식성 등을 고려하였을 때, 색칠쏙쏙이 해당 부분에서 경쟁력을 가질 수 있다고 판단하였다.
- **커스터마이징 가능의 여부 **
메디방 색칠공부, HappyColor등의 기존 색칠공부 프로그램들은 모두 이미 누군가가 만들어 놓은 도안에 대해서만 색칠이 가능하거나, 직접 손으로 그린 도안만을 추가할 수 있다.
색칠쏙쏙 프로젝트에서는 사용자의 사진을 기반으로 도안을 만들 수 있기 때문에 아이의 흥미를 유발할 수 있는 도안을 제작하여 활용할 수 있다는 장점이 있다.
- 프론트 : React Native (Expo배포)
- 서버 : Flask + Firebase / Docker + CloudRun
- 협업 툴 : Github
- Open-CV 라이브러리
좌(RGB Array) 중(RGB Array 미분) 우(불연속구간 완화)
처음으로는, Open-CV라이브러리를 통해 이미지의 RGB배열의 차이가 생기는 구간에 점을 찍어서 도안을 만들었다. 그 결과 색이 조금이라도 바뀌는 경우 점을 찍기에 좌측의 그림처럼 출력 값이 매우 난잡하게 나왔다. 이후, Sympy라이브러리를 통해 이미지 RGB배열을 각각의 미분 그래프로 나타내고 불연속점에 대해서만 점을 찍었다. 중간의 그림처럼 색이 급변하는 구간만 점을 찍는 것을 볼 수 있다. 그리고 불연속판단 구간을 늘리는 방식으로 외곽선을 추출했다.
- Numpy Array & Pytorch
좌(최적의 불연속구간 찾기) 중(Numpy Array) 우(Pytorch)
단순 외곽선 추출이 아니라 채색을 위해선 도안의 선을 굵게 만들어야 했다. 따라서, 이미지를 Numpy 배열에 넣고 배열 값을 인접 인덱스에 복사하는 방식으로 구현했다.
인물 사진의 경우, 이목구비의 선을 너무 무 뚜렷하게 따면 오히려 도안이 징그러워졌다. 그 결과, Pytorch라이브러리를 사용해 이미지에 찍힌 객체를 판단해 인물의 이목구비와 얼굴 형태에 대한 선 추출 민감도(외곽선 미분 계수)를 따로 조정하여 이목구비는 좀 더 흐리고 얼굴 윤곽에 대해서는 더 뚜렷하게 도안의 선을 추출했다.
- Homomorphic filter
마지막으로 이 어플의 취지는 추억이 깃든 실제 사진을 도안으로 만드는 것을 목표로 하기에 실제 사진을 넣었을 때 만족할만한 결과값이 나와야 했다. 실제 사진과 도안의 괴리감이 가장 크게 느껴졌던 부분은 빛의 영향이었고, 그래서 빛의 영향을 줄이기 위해 호모몰픽 필터(Homomorphic fileter) 알고리즘을 통해 빛에 대한 요소를 최대한으로 배제했다.
- 도안 출력 기능
어플이 아닌 외부에서 실제 색칠 도구를 활용하여 색칠 활동을 진행할 수 있게 한다. - 색칠 기능 확장
기존 색칠판의 색 팔레트화와 스포이드 기능 제공, 붓 뿐만 아닌 페인트 기능 제공 - 알고리즘 개선
부분 별 적용 알고리즘을 다르게 적용하는 부분을 강화하여, 부분 인식 정확도를 높이고 각 객체의 부분에 이미지 처리 기법을 다르게 적용하여 선 추출 정확도를 높이는 방향으로 개선한다.
- 1,2주차(9/19/15) : 주제 선정, 기획서 작성.
- 3,4주차(9/16~9/29) : TorchVision, Kornia를 활용한 사진 속 개체 도안화 UnitTest
- 5주차(9/30~10/6) : 기획 확정, UI/UX 디자인, 서버 세팅
- 6,7주차(10/7~10/20) : 데이터셋 수정, 부분별 감도 적용을 활용, 정확한 개체 및 외곽선 추출
- 8,9주차(10/21~11/3) : 1차 MVP완성 및 테스트 진행
- 10,11주차(11/4~11/17) : 세부사항 개발 및 선 추출 정확도 향상
- 12,13주차(11/18~12/1) : 2차 MVP완성 및 테스트 진행
- 14주차(12/2~12/8) : QA 및 최종 테스트
- 15주차(12/9) : 최종 데모
- 16주차(12/16) : 최종 보고서
- 시작화면
- 로그인 / 회원가입
-
앨범
- 비어있을 시
- 앨범들 속 사진들
- 비어있을 시
-
사진추가
- 추가할 사진 선택하기
- 사진 선택하기
- 추가할 사진의 제목 입력하기
- 추가중
- 추가할 사진 선택하기
-
도면보기
- 앨범 상세 페이지
- 도면보기
- 축소 기능
- 확대 기능
- 앨범 상세 페이지
-
그림그리기
- 앨범 상세 페이지
- 그림 그리기
- 확대/그리기 토글버튼
- 화면 확대/축소 기능
- 뒤/앞으로 가기
- 다시그리기
- 저장하기
- 불러오기
- 내보내기
- 카톡 공유
- 완성작
- 앨범 상세 페이지
