안녕하세요. 개발하는 정주입니다.
오늘은 "카멜레온" 출시 기념 앱 소개에 대해 포스팅하려고 합니다.
이번 포스팅은 기획, 디자인, 앱의 기능 소개에 대한 내용입니다.
iOS 개발 일지는 종강 후 자세히 작성할 예정입니다.
이번 앱은 전공 프로젝트 수업에서 진행한 3인 프로젝트이고 앱스토어에 두 번째로 출시한 앱입니다.
제 역할은 iOS, 기획, 디자인이었습니다.
기획부터 디자인, 개발까지 신경써서 작업하였고 그만큼 보여드리고 싶은 것이 많아 예상보다 소개 글이 길어졌네요 ㅠㅠ
그럼 시작하겠습니다!
카멜레온 기획
코로나가 시작된 후 미디어의 소비와 생산은 빠르게 늘었습니다.
초상권에 대한 인식이 부족하거나 모자이크 과정이 번거롭거나, 심미성이 떨어진다는 이유로 초상권을 침해하는 사례도 증가하고 있습니다. 이러한 문제로 초상권을 침해당한 피해자들은 불편함을 호소하고 있는 상황입니다.
실제로 한 유튜버가 무단으로 일반인을 촬영하고 업로드하여 초상권을 침해당한 피해자가 손해배상을 청구하는 일이 발생하기도 했습니다.
참고. 2021. 7. 21
대법원 선고문 중 일부 사람은 누구나 자신의 얼굴 기타 사회통념상 특정인임을 식별할 수 있는 신체적 특징에 관하여 함부로 촬영 또는 그림묘사되거나 공표되지 아니하며 영리적으로 이용당하지 않을 권리를 가지는데, 이러한 초상권은 헌법 제10조에 의하여 헌법적으로도 보장되고 있는 권리이다. 따라서 타인의 얼굴 기타 사회통념상 특정인임을 식별할 수 있는 신체적 특징이 나타나는 사진을 촬영하거나 공표하고자 하는 사람은 피촬영자로부터 촬영에 관한 동의를 받고 사진을 촬영하여야 하고, ... 사진촬영에 관한 동의 당시에 피촬영자가 허용한 범위 내의 것이라는 점에 관한 증명책임은 그 촬영자나 공표자에게 있다(대법원 2013. 2. 14. 선고 2010다103185 판결 등 참조).
저희 팀은 이러한 사회적 문제를 느끼고 기존보다 편리하게 얼굴 편집 처리를 할 수 있는 기술을 개발하기 위해 고민하였습니다.
일반적인 모자이크는 물론 기존 얼굴 편집 프로그램보다 사실적이고 자연스러운 가짜 얼굴(이하 Fake Face)을 합성하는 것을 목표로
"카멜레온: 페이크 얼굴로 초상권을 보호하세요(이하 카멜레온)" 애플리케이션을 기획하였습니다.
카멜레온 앱은 사진에서 얼굴을 찾아 편리하게 원하는 얼굴만 페이크 얼굴로 변환, 모자이크 처리를 할 수 있습니다.
또한, 개발 도중 모자이크를 제거하는 기술도 함께 발전하고 있다는 것을 알게 되었습니다.
페이크 얼굴에 모자이크 처리를 하면 모자이크를 지워도 본래의 얼굴이 보호될 수 있다고 생각하여
페이크 얼굴 + 모자이크 기능까지 추가하였습니다.
유저는 카멜레온의 세 가지의 얼굴 편집 기능으로 자연스럽고 편리하게 초상권을 보호할 수 있습니다.
카멜레온 차별점
카멜레온 앱과 다른 앱과의 차별점은 무엇일까요?
모자이크 제거 기술로부터 안전합니다.
카멜레온 앱에는 페이크 얼굴에 모자이크하는 기능이 존재합니다.
2017 구글 브레인에서 발표한 "pixel recursive super resolution" 논문에서는 모자이크를 제거하는 기술 내용을 다루고 있습니다.
모자이크 처리를 한 이미지가 높은 정확도로 복원된 결과를 볼 수 있었습니다.
카멜레온 앱은 페이크 얼굴에 모자이크를 하면 모자이크가 제거되어도 원본 얼굴은 보호될 수 있겠다고 생각하였고 기능을 개발하였습니다.
여러 명을 동시에 얼굴 처리 작업이 가능합니다.
타 앱의 경우 근접한 1명을 대상으로 하는 경우가 많습니다.
하지만 카멜레온 앱은 Face Detection을 통해 여러 명의 얼굴을 찾을 수 있습니다.
이를 통해 번거로웠던 얼굴 변환 작업을 편하게 할 수 있습니다.
원하는 얼굴만 변환이 가능합니다.
카멜레온 앱은 여러 개의 얼굴 중 원하는 얼굴만 선택하여 변환할 수 있습니다.
기획 단계부터 카멜레온 앱의 기능들이 사용될 수 있는 시나리오를 고려하여 사용성을 높이기 위해 노력했습니다.
예를 들어, 단체 사진에서 자기 얼굴은 유지한 채 타인의 얼굴만 Fake Face로 변환하거나 모자이크 처리할 수 있습니다.
결과물이 자연스럽습니다.
GAN을 이용해 Fake Face를 합성하기 때문에 타 앱에 비해
원본 표정과 피부색을 최대한 유지한 채 합성할 수 있어 자연스러운 결과물이 탄생합니다.
카멜레온 화면 디자인
카멜레온의 디자인도 진행했습니다. 전체적인 틀은 팀원 모두와 협의하여 제작하였고
상세한 디자인은 제가 담당했습니다.
라이트 모드
라이트 모드의 디자인입니다. 카멜레온 대표 색상인 녹색과 흰색을 주로 사용하였습니다.
이번 프로젝트를 통해서 네비게이션바와 탭바를 꾸미는 방법도 배웠네요.
다크모드
카멜레온 앱은 다크 모드도 지원합니다!
카멜레온 대표 색상인 녹색이 라이트 모드와 다크 모드 둘 다 잘 어울려서 이쁘게 나온 듯 합니다.
iPad 디자인
아이패드 디자인도 신경써서 진행했습니다.
변환할 사진의 크기가 지나치게 커지지 않도록 작업하였고,
바꿀 얼굴을 선택하는 화면에서 셀이 커지는 것이 아닐 한 줄에 들어가는 셀의 개수를 증가시켰습니다.
아이패드의 사용성이 컨텐츠를 크게 보는 것보다는 많이, 넓게 보는 것이기 때문입니다!
예를 들어, 아이패드에서 카카오톡을 한다고 했을 때 말풍선이 많아지지 커지는 것이 아니잖아요? ㅎㅎ
같은 원리로 카멜레온 앱에서도 컨텐츠를 한 화면에 더 많이 볼 수 있도록 작업했습니다.
카멜레온 앱 화면 설명
앱의 화면을 하나하나 소개해드리겠습니다.
홈 화면
홈 화면입니다.
Photo 버튼을 누르면 업로드 화면으로 이동합니다.
탭바의 More 버튼을 누르면 더보기 화면으로 이동합니다.
강제 업데이트를 해야 하면 Alert가 나와 앱스토어로 이동 시킵니다.
원래는 사진과 영상을 모두 지원하려고 했습니다. 그래서 Photo, Video로 버튼이 두 개였는데요.
비디오 변환은 완성도는 충분히 뛰어난데 속도가 너무 느려서 어쩔 수 없이 사진 변환만 지원하게 되었습니다.
추후 장비가 좋아지면 영상을 지원하게 하려고... 일단은 홈 화면은 유지하려고 합니다 ㅎㅎ
업로드 화면
업로드 화면입니다.
중앙의 View를 클릭하면 앨범이 나오고 변환할 사진을 선택하면 이미지가 삽입됩니다.
당장은 해결하지 못한 UIImagePicker를 사용했는데 종강 후 PHPicker로 리팩토링 예정입니다.
PHPicker를 사용하기 위해 iOS 14로 최소 지원 버전을 올렸는데요...
비디오에서 썸네일을 생성하는 과정에서 에러가 발생해서... 너무 속상했지만 일정 문제로 UIImagePicker로 갈았습니다 ㅠㅠ
꼭꼭 PHPicker로 리팩토링 하려고 합니다.
카멜레온은 페이크 얼굴 변환, 모자이크, 페이크 얼굴 + 모자이크 기능이 있습니다.
이는 segmented control UI를 이용했습니다.
처음에는 안드로이드의 Radio 버튼을 고려했었는데요.
iOS에는 라디오 버튼 대신 segmented control을 지원해서 이 view로 선택해서 구현했습니다.
이쁘고 사용성도 좋아서 만족 중입니다.
업로드 버튼을 누르면 서버로 multipart-form을 이용해 사진을 전송합니다.
로딩 화면
로딩 화면입니다.
URLSession을 이용해 response에서 result ok가 올 때까지 로딩 화면을 보여줍니다.
웹소켓으로 하고 싶었지만 백엔드 담당 개발자와 협의를 통해 POST를 일정 주기로 보내서 처리하기로 했습니다.
아마 이 과정이 긴 시간이 소요된다면 서버->클라이언트 통신이 필수였겠지만 몇 초 소요가 안 되기 때문에 POST로 처리해도 무방하다고 생각했습니다. 그래도 마음 한 켠에 아쉬움이 있는 작업 방법이었네요.
얼굴 선택 화면
변환할 얼굴을 선택하는 화면입니다.
카멜레온 앱은 원하는 얼굴만 선택해서 변환하거나 모자이크 처리를 할 수 있습니다.
UICollectionView을 이용했고 아이폰에서는 3열, 아이패드에서는 7열로 나옵니다 (화면 사이즈에 따라 다름)
변환하기 버튼을 누르면 변환 화면으로 이동합니다.
변환 화면
변환 화면입니다.
UIProgressView를 이용해 변환률을 나타냈습니다.
여기도 웹소켓을 적용했으면 좋았겠지만 백엔드 개발자와 협의 끝에 POST로 처리하기로 결정했습니다.
프론트에서 적당히 퍼센트를 올리면서 완료가 되면 100%까지 한 번에 갑니다 ㅎㅎㅋㅋ
자연스럽게 보이기 위해 신경 많이 썼어요. 아마 대부분 모를듯 (행복회로 풀가동)
결과 화면
변환 결과를 보여줍니다.
앨범에 저장할 수도 있고, SNS 공유를 할 수도 있습니다.
프로젝트 소감
개발 일지에서 자세히 다룰 내용이지만...
이번 프로젝트에서는 라이브러리를 사용하지 않는 것을 목표로 했습니다.
그래서 Lottie를 제외한 라이브러리를 일절 사용하지 않았습니다.
그러다보니 지옥의 URLSession 중첩 클로저를 자주 봐서 코드 관리가 힘들더라고요.
iOS를 개발하면서 만든 가장 큰 규모의 앱이었는데요. (꼬꼬마 수준이지만 ㅎ)
재밌으면서 어려웠던 프로젝트였던 것 같습니다.
이제 종강을 하면 리팩토링하느라 뼈가 빠질 듯 합니다 ㅎㅎ
카멜레온 앱의 결과물은 생각보다 완성도가 뛰어납니다.
재미로 돌리다보면 웃기게 합성될 때도 있어서 저는 소소하게 웃고 싶을 때 한 번씩 들어가서 변환하고 그럽니다.
한 번 사용 해보시고 피드백 주시면 감사하겠습니다!
감사합니다.
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.