MemeMe 어플리케이션은 Udacity에 있는 "UIKit Fundamentals" 강좌를 들으면 작성한 앱입니다. 강좌를 들으며 배운 기본적인 기술로 만들어진 앱에 상세한 부분들을 다듬어 앱을 제작하였습니다.
MemeMe 어플리케이션은 기존 핸드폰에 저장되어 있거나 카메라를 통해 찍은 사진을 불러와 자신이 원하는 문구를 위 아래로 삽입하며 편집하고 그 결과물은 주변 지인들에게 공유 할 수 있는 어플리케이션 입니다.
MemeMe 어플리케이션은 아래 흐름과 같이 사용 할 수 있는 어플리케이션입니다.
- 사진 가져오기
기존 핸드폰에 저장되어 있던 사진이나 카메라를 통해 새로 찍은 사진을 어플리케이션으로 가지고 올 수 있습니다.
사진을 가지고 올 경우 기존 사진의 비율을 그대로 유지하기 때문에 가로가 긴 사진의 경우 핸드폰을 가로로 눕혀 사용하는 것을 권장합니다. 세로가 긴 사진의 경우 세로 모드로 사용하는 것이 좋습니다.
가로 세로를 적당하게 사용하지 않을 경우 최종 결과물의 화질이 다소 떨어질 수 있습니다.
- 이미지 편집하기
이미지의 위 아래로 텍스트를 입력 할 수 있습니다. 텍스트필드의 위치는 이미지의 상,하단의 위치로 자동적으로 세팅됩니다.
- 이미지 공유하기
MemeMe를 통해 완성된 Meme를 핸드폰에 저장하거나 문자, 카톡 등으로 주변 지인들에게 보낼 수 있습니다.
- 최근 기록
최근 만들어 저장하거나 전송했던 Meme는 앱 첫번째 화면에서 다시 볼 수 있습니다. 해당 아이템을 클릭할 경우 기존에 작성되었던 내용을 가져와 수정하여 다시 저장하거나 전송 할 수 있습니다.
- 삭제하기
최근 목록 테이블뷰에서 지우고자 하는 아이템은 좌측으로 밀어 삭제 할 수 있습니다.
이미지 편집 화면 - 세로
이미지 편집 화면 - 가로
편집한 이미지 전송 화면
최근 목록 화면 - 테이블뷰
최근 목록 화면 - 컬렉션뷰
저장된 이미지
이미지 크기에 맞게 잘라서 저장이 됩니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/YQ3z_d5g42o" frameborder="0" allowfullscreen></iframe>시연영상은 유튜브에서 보실 수 있습니다. https://www.youtube.com/embed/YQ3z_d5g42o
강의를 통해 만들어지는 앱의 최종 결과물이 여러 부분으로 제대로 구현이 되지 않은 부분이 많았습니다.
그중 하나는 이미지를 잘라내는 부분에 여백이 남아있고 텍스트 필드는 이미지에 상관없이 항상 위치가 고정되어 있었습니다.
이 부분을 고쳐보고 싶어 이미지의 크기를 계산해서 그 부분만 잘라내는 방법을 구현하였습니다.
이 과정에서 텍스트 필드의 위치가 이미지와 위치가 맞지 않을 경우가 생겨 텍스트 필드의 위치도 이미지의 위치를 통해 결정하였습니다.