brunch

You can make anything
by writing

C.S.Lewis

by KTH UX DESIGN Apr 03. 2020

반려동물과 함께하는
커뮤니티 '아지냥이' #1

삼성카드 x KTH Project

두 번째 소개 프로젝트는 많은 애견, 애묘인이 사용하고 있는 앱 아지냥이입니다. 오픈된 지 벌써 3년 차 앱으로 오픈 후 6개월 뒤 바로 기능 추가와 ver2 작업이 있었기에 거의 1년 넘게 함께한 프로젝트입니다.



반려동물을 위한 다양한 정보와 함께 전문가 상담, 반려동물을 위한 놀이까지 많은 기능을 포함하고 있어 프로젝트에 참여하면서도 유용한 앱이 될 거란 확신이 들었던 작업이었죠. 짧은 기간 동안 다양한 기능을 만들기 위해 처음으로 애자일 방식의 프로세스로 기획, 디자인, 개발이 거의 동시에 수정, 적용, 테스트가 진행되다 보니 하루하루가 빠르게 지나갔지만 아직도 전 과정이 기억에 또렷하게 남아있는 프로젝트입니다.






KT 계열사인 KTH에서 삼성카드용 앱을 왜 만들지?라고 생각하시겠죠. KTH는 KT 계열사가 아니어도 더 다양한 회사들과 협업 프로젝트를 진행하고 있답니다.


아지냥이는 삼성카드에서 사회환원 프로젝트의 일환으로 시작된 프로젝트로 실무작업 중 저희 팀에서는 초반 UX컨셉 제안부터 UI 디자인 전체를 담당하였으며 캐릭터는 캐릭터 전문회사에서 진행하여 총 3개의 회사에서 협업으로 진행된 프로젝트입니다.  


처음 삼성카드에서 요청한 부분은 다양한 기능을 한데 모아 런쳐 형식으로 제작된 앱 디자인을 요청받았고 내부적으로 브레인스토밍 결과 딱딱한 런쳐 형식의 앱보다 다양한 캐릭터를 활용해서 더 친근하고 재미있는 독특한 UI를 만들고자 하였습니다.


  3가지 서로 다른 스타일로 제안


내부 컨셉 회의 결과 저희는 요청받은 런쳐 타입 A안, 내부 제안 B안, 두 가지 안을 절충한 새로운 C안, 총 3가지 UI를 제안하였습니다. 이렇게 제안을 할 경우 일반적으로는 요청한 A 안이나 둘을 절충한 C 안이 채택되는 경우가 많은데 이번엔 좀 색다르게 저희의 제안 안인 B 안이 선택되었습니다. 제안 안에 더 많은 공을 들이기도 했지만 기존과 다른 새로운 스타일의 가능성을 높게 평가받았던 것 같습니다. 


결정된 안은 반려동물과 함께 할 수 있는 마당이 있는 집에 반려동물이 거닐고 있는 컨셉 배경으로 캐릭터에  반려동물의 이름을 입력함으로 앱에 더 따뜻한 친밀감을 더 갖도록 하고 메인에서 기능을 바로 선택하는 일반적인 앱과 다르게 UI에 다양한 모션을 사용해 동적인 게임과 같은 사용성도 부여하였습니다.

런쳐형식, 게임형 풀화면, 카드타입형 UI


메인 컨셉이 처음 기획된 런쳐 타입과 다른 방향으로 결정이 되어 전반적인 UI 기획이 메인 컨셉에 맞게 수정되었고 메인뿐 아닌 다른 페이지도 디자인에 맞춰 기획이나 개발이 수정되는 경우가 많았습니다. 일반적으로 프로젝트 진행 중 개발이 어려운 부분은 기획과 디자인을 수정해서 맞추는 경우가 많았는데 그 반대가 되어 디자이너가 더 주도적으로 이끌어 가다 보니 높아지는 업무강도에 비례해 시야도 넓어지고 작업 참여도와 만족도까지 높아졌던 것 같습니다.

아지냥이 2주 작업 사이클


전반적인 작업 진행은 2주 사이클로 기획, 디자인, 개발, 테스트가 거의 동시적으로 진행과 수정이 반복되었습니다.  특히 6,7, 12, 13 스텝은 만족스러운 결과물이 나오기 전까진 무한 루프가 되다 보니 지금은 상상할 수 없던 야근과 주말 업무가 계속되었으나 보다 완성도를 높이기 위해 모두 적극적으로 참여하게 되었습니다. 프로젝트가 시작된 지 4개월 뒤인 2017년 9월 26일 첫 버전이 론칭되었습니다. 지금이야 예전 작업 파일들을 여유롭게 찾아볼 수 있으나 일정을 정말 빠듯하게 사용해 매주가 빠르게 지나갔던 것 같습니다.


아지냥이 1차 오픈 버전


캐릭터와 배경 등 많은 일러스트가 사용되었지만 게임이 아닌 앱이기에 최대한 자연스러운 애니메이션 효과를 위해 드로잉 작업에 많은 부분을 할애하였고 프로젝트가 진행되며 캐릭터와 풀숲뿐이었던 마당은 화분과 마루 등 다양한 오브젝트가 추가되었습니다.


세부 기능은 하단의 GNB를 호출해 선택할 수 있지만 최대한 동선을 줄이기 위해 자주 사용할 기능을 메인에 노출하되 전체 UI에 자연스럽게 녹아들도록 일러스트로 된 아이콘을 사용하였고 반려동물과 동일한 품종의 캐릭터를 선택 후 이름과 입양일을 입력하면 함께 지낸 일 수를 보여주며 캐릭터 터치 시엔 다양한 정보를 말풍선을 사용해 보이도록 하였습니다. 


반려동물이 여러 마리 일 경우엔 원하는 펫을 메인으로 선택할 수 있고 반려동물을 위한 음악 기능, 다양한 상담기능을 가진 챗봇과 함께 실제 수의사와 상담도 가능했으며 반려동물과 함께 미션을 클리어할 수 있는 버킷리스트, 커뮤니티 게시판 등 애견, 애묘인들에게 최적화된 다양한 기능이 추가되었습니다.


 아지냥이 서브 페이지 UI


다양한 기능의 서브 페이지는 삼성카드의 자체 디자인 가이드가 있어 기본 레이아웃은 가이드에 맞춰 제작되었으나 기존과는 다른 부분이 많아 새롭게 변경, 추가되는 내용이 많다 보니 내부에서 작업한 뒤에 삼성카드의 가이드에 추가되었습니다. 


1차 버전 오픈 반년 후 개선사항과 추가 기능을 위한 2차 버전 작업이 시작되었고 1차 버전에 비해 더 많은 애니메이션 효과를 사용하게 되었습니다. 최근에 접속해보니 그때 버전이 아직 서비스되고 있어 더 반가웠던 것 같습니다. 2차 버전 아지냥이는 2편에서 자세히 알려드리겠습니다.


감사합니다.





아지냥이 설치해 보세요



작가의 이전글 달리는 차 안에서 "지니"를 불러보자. #2
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari