우리 학교 융합콘텐츠학과엔 악명 높은 4학년 수업이 있다. 바로 '콘텐츠시스템프로젝트'라는 수업인데, 수강생 4명이서 한 팀이 되어 서비스 기획부터 디자인, 개발, (가능하다면) 배포까지 해야 하는 수업이기 때문이다. 그러나 프로젝트형 수업이라면 일단 눈을 빛내는 나는 기어코 3학년 2학기에 이 수업을 신청했다. 우리 팀은 기획을 4명이서 함께 하고, 2명이 디자인을, 나는 개발을 맡았다.
Client Project 카테고리에 기획 및 디자인과 관련된 글을 써도 될까 잠깐 고민했지만.. 이 프로젝트에서 안드로이드 개발을 도맡아 했으니 이곳에 글을 쓰기로 했다.
---
✔ 기획
약 4주차까지 4명이서 서비스를 기획했다. 서비스 기획 배경, 타겟 특성, 서비스의 목적, 메인 기능, 주요 컨셉(혹은 스토리 라인) 등을 PPT로 만들어 발표를 했는데, 구글 드라이브에서 엑셀과 PPT를 척척 해내는 해람 언니를 보면서 좋은 발표자료란 단순히 보기에 예쁜 자료가 아닌, 보는 사람이 쉽게 이해할 수 있도록 적절한 툴을 활용해 만드는 것이라는 사실을 처음으로 깨달았다.
생각보다 기획에서 많은 시간이 소요되었다. 밀레니얼 세대가 환경 보호 활동에 거부감을 느끼지 않고, 쉬운 것부터 하나씩 시도해볼 수 있게 하자는 것이 우리 서비스의 목적이었는데, 이 부분을 해결하는 것이 생각보다 쉽지 않았다.
1) 어떻게 환경 보호 활동이 재밌다고 느끼도록 할 것인가?
1-1) 멸종 위기 동물을 활용한 스토리텔링
로그인 후 최초 1회 성향 테스트를 진행하여 사용자의 유형을 결정한다.(MBTI와 관련된 테스트가 매우 유행하던 시기였음.) 이 때, 유형은 멸종 위기 동물을 참고하여 설정한다. (ex - "환경 보호가 중요하다는 건 아는데..", 시작이 어려운 북극곰)
이후 환경 보호 활동을 하면 본인의 캐릭터(1-1의 유형 테스트 결과에 해당하는 멸종 위기 동물)가 점점 성장하여 본인의 고향으로 돌아가는 스토리텔링을 사용한다.
- 장점 : 환경 보호 애플리케이션이라는 서비스의 목적과 일치하며 캐릭터를 성장시킨다는 게이미피케이션 요소가 가미된 스토리텔링은 사용자들에게 충분히 흥미롭게 다가갈 수 있다.
- 단점 : 본인의 성향에 해당하는 동물만 성장시킬 수 있다면, 한 번 자연으로 돌려보낸 후에는 사용자는 환경 보호 활동에 흥미를 잃을 것이다. (만약 다양한 동물을 성장시킬 수 있다고 해도) 사용자가 계속해서 새로운 동물 성장에 시도할 수 있도록 다양한 동물의 성장별 일러스트가 필요한데 이 모든 작업을 시간 내에 끝내는 것이 어렵다.
1-2) 카드, 스탬프 멘탈모델 활용
환경 보호 행위를 작은 미션으로 쪼개 특정 기간 동안 수행하면 카페에서 사용하는 스탬프(쿠폰)처럼 도장을 찍을 수 있도록 한다. 만약 목표한만큼 미션을 모두 달성했을 경우 해당 카드를 수집할 수 있도록 하여 사용자의 수집욕을 자극한다.
- 장점 : 사용자 조사 결과 밀레니얼 세대가 가장 동기부여를 크게 받는 부분이 '가시적으로 눈에 보이는 성과'였다는 점에서, 미션 수행 시마다 스탬프를 찍고 수행 완료 시 해당 카드를 수집해 보관할 수 있다는 것은 동기부여 요소로 적절하다.
- 단점 : 첫째로, 환경 보호 활동을 미션의 형태로 제시해야 하는데 이 미션이 사용자에게 뻔하지 않게 다가가기가 상당히 어렵다. 우리가 할 수 있는 환경 보호 활동은 불 끄기, 분리수거하기와 같은 상투적인 것들이기 때문이다. 둘째로, 스탬프처럼 일정 기간 연속적으로 수행해야만 완수할 수 있는 형태일 경우 외출할 일이 없을 때의 '대중 교통 이용하기'와 같은 미션들이 의미를 잃을 수 있으며, 만약 불연속적으로 횟수만 체크하는 형태라면 사용자들이 해당 미션을 수행해야 한다는 위기의식을 느끼지 못할 것이다. (카드 수집만을 위해서 미션 수행 없이 체크만 하는 사용자를 선별할 수 있는 방법도 필요할 것이다.)
간단히 적어서 이 정도이고, 정말 머리가 터지게 고민을 했었다. 상투적인 목적을 가지고 있는 서비스인만큼 지루하지 않고 새롭게 다가갈 수 있는 요소가 필요했기 때문이다. 교수님들의 피드백을 듣고 매일 기획을 엎어가며 고민했었다. 기획 중간 발표까지 이리저리 갈피를 못 잡고 있는 우리 팀에게 교수님께서 하신 한 마디는 이것이었다.
"다 쳐내고 핵심만 가져가세요. 버리는 거 힘들죠. 근데 잘 버리는 게 제일 중요해요."
하고 싶은 것이 많아서 이것 저것 살을 잔뜩 붙여간 우리 팀은 사실 그날 화들짝 놀랐었다. 그도 그럴 것이, 발표 전까지는 '아, 우리 기획 열심히 했다. 이 정도면 됐다.'라고 생각했었는데 다른 팀원들과 교수님 앞에서 우리 기획을 직접 발표하자마자 바로 우리 기획에 구멍이 있다는 것을 발견할 수 있었기 때문이다. 머릿속에서 사이렌이 울리기 시작한 4명은 그날 모든 부가적인 기능을 쳐내고 핵심 기능만 남기는 작업에 들어갔다.
하나의 기능만을 남기는 것도 정말 어려웠는데, 그 하나의 기능의 기반이 되는 콘텐츠를 탄탄히 준비하는 것도 여간 어려운 일이 아니었다. 사용자 조사 결과로 나왔던 동기 부여 요소, 환경 보호 실천이 어려운 이유 등등을 살펴보고, 생각나는대로 아이디어를 뱉어보고, 자료 조사를 하고, 엑셀에 결과를 적고, 계속해서 이 과정을 반복했다. 환경 보호 행위를 미션으로 바꾸는 것이 정말 어려웠는데, 멸종 위기 동물과 환경 보호 테마를 연결 짓는 것부터 - 각 미션이 지속될 수 있을만큼 의미 있는 행위여야 하고 - 되도록이면 상투적이지 않고 새롭게 다가갈 수 있는 미션이면 더 좋고 - 카드에 미션 명이 모두 들어갈 수 있도록 6자 이내로 미션 이름을 줄여야 했기 때문이었다. 회의에 회의를 거듭한 결과, 우리는 이 것을 비스무리하게 만족하는 미션들을 뽑아내는데 성공했다.
특히, 나이키 런의 응원 문구에서 영감을 받아 미션 성공시마다 랜덤으로 응원 문구를 띄워주자는 언니의 아이디어는 정말 신선하다고 생각했다. 이 역시 카드 내부에 뜨는 메세지였기 때문에 글자수를 줄이는데 공을 들여야 했다.
이렇게 기본적인 기획이 끝나갈 무렵, 우리는 디자인 컨셉을 고민하기 시작했다. 이 부분에 대해서는 사실 숟가락을 얹었다고 표현해도 될만큼 능력자 디자이너 2명에게 캐리를 당한 부분이라 글을 적기 민망하지만, 그래도 고민했던 부분들에 대해 적어보고자 한다.
---
✔ 디자인
"환경 보호는 무조건 바른 이미지라는 걸 깨보는 건 어때요? 완전 힙하게 가는 거예요."
정말이지, 내가 이 프로젝트에 진심으로 참여하게 만들었던 한 마디였다. 환경 보호와 힙이라니. 그게 가능한가? 반신반의한 마음으로 평소에 힙하다고 생각했던 서비스들을 잔뜩 레퍼런스로 가져갔다. 주로 어두운 배경에 톡톡 튀는 네온 컬러들이 포인트가 되거나, 그래픽이 화려한 어플들이었다. 레퍼런스를 가져가면서도 이런 걸 찾아가는게 맞나?라는 걱정을 했었는데, 레퍼런스를 확인하자마자 마우스로 호랑이 캐릭터를 슥슥 그려내는 우리 디자이너들을 보고 '이거 되는 주식이다..!'라는 생각을 했었다. 이때 그린 호랑이가 여러 번의 변형을 거쳐 지금의 '뱅갈 호랑이'가 되었다.
물론 개인의 취향 때문에 무조건 힙한 컨셉을 추구한 것은 아니고, 우리의 타겟은 새롭고 재밌는 것을 좋아하는 밀레니얼 세대이기 때문에 기존 환경 보호 어플 서비스들과 다른 점이 필요했다. 바로 이 점 때문에 기획 단계에서 치열하게 고민했으니, 이 고민들을 디자인에도 녹여내야 하지 않겠는가. 기존 '환경 보호'라는 단어를 들었을 때 떠오르는 이미지와 전혀 달라서 타겟들의 흥미를 끌 수 있는 디자인을 해내고 말겠다는 포부 아래 디자이너들의 뷰공장 가동이 시작됐다.
무엇보다도 4명이 모두 공통적으로 중요하게 생각했던 부분은 반드시 사용자의 수집욕을 자극하는 '카드'를 메인 요소로 가져가자는 것과, 연속적인 미션 수행을 유도할 수 있는 '캘린더(스탬프)'를 사용하자는 것이었다. 이렇게 기획에 관해 고민했던 사항을 계속해서 리마인드하고 함께 고민하면, 디자이너들은 조금 더 세심하게 해당 부분에 대해 고민해서 디자인을 해오는 방식으로 디자인 작업을 진행했다.
특히, 애니모어의 경우 일반/연속 미션이 존재하기 때문에, 미션의 종류에 따라 카드를 쉽게 구분할 수 있도록 차별점을 주면 좋겠다는 피드백을 받아서 고민을 많이 했었다. 기존에는 일반/연속 미션에 따라 캘린더는 동일하게 사용하고, 캘린더 한 칸의 모양을 원/사각형으로만 구분을 했었기 때문에 언뜻 보아서는 미션의 종류가 다르다는 것을 쉽게 알아볼 수 없었기 때문이다. 카드 색으로 구분하면 쉽겠지만, 이미 미션 테마별로 메인 컬러를 다 정해놓았기 때문에 색으로도 구분을 할 수가 없었다. 카드의 모양과 색을 유지하되 미션의 종류가 다른 것을 어떻게 보여줄 수 있을까?
이 문제에 대해 열심히 고민을 하던 디자이너들은 '프로그레스 바'라는 멋진 해결책을 가져왔다. 연속 미션의 경우 매일 매일 미션을 진행하고 있다는 것을 보여주는 것이 필요하기 때문에 캘린더를 그대로 가져가는 것이 효과적이며, 일반 미션의 경우 21회라는 목표 횟수를 모두 달성하기까지 현재 진척도를 프로그레스 바로 보여주면 사용자가 더 직관적으로 이해할 수 있을 것 같다는 것이 그 이유였다. 기획과도 잘 맞고, 디자인적으로 고민하던 문제도 잘 해결해주는 멋진 해결책이었기 때문에 우리는 모두 흔쾌히 수락했고, 그렇게 멋진 20개의 카드가 완성되었다. 나는 부가적인 (후순위) 뷰들을 담당했는데 내가 뷰를 하나 그리면 카드가 한 줄씩 완성되어 있어서 감탄했던 기억이 난다.
디자인을 할 때는 무조건 색감이 쨍하고 예쁜 게 장땡이라고 생각했는데 정말 사용자가 쓰는 서비스를 디자인하는 작업이다보니 버튼을 어디에 두어야 사용자들이 헷갈리지 않고 바로 누를 수 있을지, 정보를 한 뷰에 얼만큼 담아야 좋을지 등등 고민해야 할 부분이 정말 많았다. 사실 개발을 다 마친 지금에서야 적어보는 말은, 앞으로 이렇게 반복적인 요소가 많은 서비스를 디자인 할 때는 재사용하기 좋게 요소들의 위치를 고정해놓고 디자인하는 것이 좋을 것 같다. 캐릭터나 추가되는 요소들의 위치가 미묘하게 달라 개발할 때는 디자이너의 양해를 구하고 위치를 일률적으로 맞춘 후 리사이클러뷰를 구현했었던 기억이 난다. 역시 보기 좋은 디자인이랑, 쓰기 좋은 디자인이랑, 개발하기 좋은 디자인은 다르다는 것을 느꼈다. 역시 협업을 해봐야 어떤 부분을 더 세심하게 고려해야 할지 알게 되는 것 같다.
---
✔ 최종 결과물
개발에 대한 내용을 적기 전, 최종 결과물을 먼저 언급하는 것이 내용 이해가 더 쉬울 것 같아 결과물을 먼저 적는다! 아래는 서비스의 핵심 기능을 모두 담은 서비스 소개 영상이다. (디자인과 목업의 사이즈가 달라 부득이하게 하단바가 매우 길어진 모양이다. 실제 개발에서는 정확한 디자인대로 구현했다. 구현된 모습은 하단 gif 파일 참조.)
위의 과정들을 거쳐 최종적으로 완성된 기획/디자인은 아래와 같다. gif 이미지는 실제 개발한 프로토타입을 화면 녹화한 것이다.
서비스 이름 : ani more [애니모어]
* 멸종 위기 동물을 뜻하는 'animore'과, 더 이상 환경 보호를 미루면 안 된다는 뜻의 'anymore'의 합성어
서비스 슬로건 : 지금 바로 시작하는 환경 보호 첫걸음
서비스 핵심 기능그땐 많이 줄였다고 생각했는데, 지금 적고 보니 기능이 꽤나 많다..
1. 사용자는 메인 화면에서 현재 진행 중인 환경 보호 미션 카드를 확인할 수 있다.
1) 현재 진행 중인 카드가 메인 화면에 보여 어플 접속 후 간편하게 미션 완료를 체크할 수 있도록 했다. 최대 카드 추가 가능 횟수를 5개로 제한하고, 메인 화면에 카드가 4개 있을 때까지는 카드 추가를 유도하는 디폴트 카드(해당 카드 클릭 시 1번의 카드 추가 뷰로 이동한다.)를 마지막에 보여주었다가, 최대 개수인 5개가 되면 해당 카드가 메인 뷰에서 사라지도록 했다.
2) 중간에 all, 애니, 모어 버튼을 추가하여 미션 종류 별로 카드를 모아볼 수 있도록 했다.
3) 화면의 최상단에는 메인 뷰가 로딩될 때마다 랜덤으로 환경 보호 한 줄 지식이 출력되도록 했다. 이는 사용자가 환경 보호를 위해 알아두면 좋지만, 미션으로 수행하기는 다소 어렵다고 판단했던 지식들을 사용자에게 효과적으로 전달하기 위해 생각해낸 방법이다.
4) 사용자는 하루에 한 번 미션을 수행할 수 있다. 미션 수행 시 랜덤으로 응원 문구가 출력되며, 하루 동안 카드가 비활성화 된다.
5) 카드 자체를 클릭했을 경우 카드의 자세한 정보를 확인할 수 있다. 상세보기의 느낌이 들도록 카드를 더 크게 확대하여 나타내었고, 해당 미션의 내용을 확인할 수 있도록 하여 결국 이 모든 행위가 '환경 보호'를 위한 것임을 상기할 수 있도록 했다. 이때 카드의 느낌을 더 살리기 위해 재미 요소로 카드를 터치하면 뒷면으로 뒤집히는 애니메이션을 적용했다. 미션을 그만두고 싶다면 카드 상세보기 뷰에서 카드 삭제하기 버튼을 클릭하여 삭제 가능하다.
2. 사용자는 환경 보호 미션 카드를 추가할 수 있다.
1) 이 때, 환경 보호 미션에는 '구아나코(소비습관개선)', '일리피카(전기 절약)', '하프물범(분리수거)', '자바뿔매(페이퍼리스)', '뱅갈호랑이(생활습관)' 5개의 테마가 존재한다. 이는 멸종 위기 동물들로, 사용자가 각 동물(테마)를 선택하면 사용자가 해당 테마의 미션을 수행할 경우 선택된 멸종 위기 동물에게 어떤 이로운 영향을 줄 수 있지에 대한 설명이 나타난다. 이는 사용자가 자신의 작은 행위가 더불어 살아가는 지구를 위한 노력이 될 수 있다는 것을 간접적으로 인지하게 할 뿐만 아니라, 전체 서비스의 컨셉이 되는 멸종 위기 동물 캐릭터를 사용자에게 자연스럽게 노출시킬 수 있다.
2) 테마를 선택하면 미션이 랜덤으로 부여된다. 이는 비교적 적은 가짓수의 미션을 한 번에 보여주는 것보다 랜덤으로 하나씩 보여줌으로써 사용자가 지루함을 느끼지 않고, 더 많은 미션을 확인해보고 싶다는 궁금증을 유발할 수 있기 때문이다.
3) 미션 선택 후 사용자는 본인이 해당 미션을 어떻게 수행할 것인지 방법을 선택한다. 애니 챌린지를 선택할 경우 기간 제한 없이 총 21번 미션을 수행하면 성공으로 처리되며, 모어 챌린지를 선택할 경우 7일/14일/21일간 연속으로 미션을 수행해야만 성공으로 처리된다. 각각의 특징을 살리기 위해 애니 챌린지의 경우 인디케이터의 형태를, 모어 챌린지의 경우 캘린더가 채워지는 형태로 제작했다.
4) 이때, 일반/연속 챌린지라는 명료한 이름을 사용할지 아니면 브랜딩 요소가 가미된 애니/모어 챌린지라는 이름을 사용할지 고민했는데 팀원들과의 회의 끝에 후자로 결정했다. 미션 수행 방법을 결정하는 뷰에서 daypicker나 7일/14일/21일을 나타내는 버튼이 워낙 분명해서 사용자들이 의미를 이해하지 못할 위험이 적었고, 애니모어가 컨셉이 두드러지는 서비스다보니 컨셉을 드러낼 부분이 더 필요했기 때문이다.
3. 사용자는 과거의 카드를 모아볼 수 있다.
1) 상단에는 본인이 미션을 완료한 카드의 개수를 카운트하여 '{사용자이름} 님, 총 {완료한 카드의 개수} 마리의 동물을 구출하셨군요!'라는 문구를 보여주어 미션 완료에 대한 동기부여를 할 수 있도록 했다.
2) 성공 카드의 경우에는 테두리를, 실패 카드의 경우에는 엑스표를 나타내도록 했으며, 각 카드의 종류마다 다른 디자인을 세부적으로 적용하였다. (배경에 투명도를 높여 7/14/21을 적은 것이나, 일수가 늘어날수록 카드 디테일 요소를 추가한 것 등등)
3) 과거 카드에서도 각 카드를 누르면 카드의 자세한 정보를 확인할 수 있다. 무엇보다도 환경 보호를 위한 서비스이기 때문에 환경 보호와 관련된 정보는 어디서든 접근 가능해야 한다고 생각했기 때문이다.
---
✔ 개발
빼놓을 수 없는 개발 이야기! 안드로이드 무서운 줄을 모르고 안드로이드 첫 개발을 프로젝트 수업에서 시도했다. 서버를 하면서 어깨 너머로 클라 개발자들이 개발하는 것을 봤으니 어느 정도는 할 수 있겠지 했는데, 정말 큰 오산이었다. 단순히 뷰를 그리는 작업만이 클라 개발자의 일이라고 생각했던 내가 뒤통수를 맞았던 경험을 적어보려 한다.
1) 클라이언트 개발자의 일은 두 가지다. 뷰를 그리는 것, 서버에서 받아올 데이터를 담아놓을 공간을 준비하는 것.
와, 생각보다 정말 할 일이 많았다. 우선 뷰를 그리는 것을 내가 왜 만만하게 생각했는지 모르겠는데, 뷰를 구현하는 것 자체도 상당히 까다로웠다. 처음에는 리사이클러뷰라는 것을 모르고 카드 색별로 layout을 모두 제작했는데, 아무리 생각해도 안드로이드 개발자들이 이렇게 비효율적으로 일할 것 같지는 않았다(..) 그래서 뷰를 재사용하는 방법에 대해 구글링을 한 결과 리사이클러뷰라는 것을 알게 되었고, 카드 종류 별로 하나씩의 layout만을 남겨둘 수 있게 되었다. 리사이클러뷰를 만들었는데 데이터를 바인딩하는 방법을 몰라서 카드를 뷰에 띄우기까지는 또 많은 삽질이 필요했다. 교수님께서 "데이터를 안 넣었는데 뭐가 뷰에 나오길 바라는거야..?"라는 말씀을 하셔서 입을 틀어 막으며 박수를 쳤던 기억이 난다.
카드가 가장 중요한 요소다보니 카드와 관련해서 디자인 디테일이 다른 부분이 많아서 디자인 요소를 꼼꼼하게 확인하는 것도 생각보다 어려웠다. 연속 일수, 미션 종류에 따라 다른 카드를 보여주어야 하고, 과거 카드의 경우 성공/실패 여부에 따라서도 다른 카드를 보여줘야 하기 때문에 이 부분에 대해 어떻게 하는게 좋을지 고민했다. 일단 내가 생각해낼 수 있는 방법은 리사이클러뷰의 어댑터에서 카드의 인덱스에 따라 다른 이미지/색 등을 출력하도록 해뒀는데, 이 방법은 카드 종류가 최대 20개라 가능했던 것 같고 이것보다 더 효율적인 방법이 있었는지 궁금하다. 이외에도 daypicker, 라디오버튼, 카드를 뒤집는 애니메이션, 스플래시 등 자잘하지만 결코 처음 도전하는 자에게는 쉽지 않은 요소들이 많아서 마지막까지 손에 불나게 구글링을 했었다.
그런데 뷰를 구현하는 것만이 프론트 개발자의 업무가 아니었다. 서버에서 보내주는 데이터 형식에 맞춰서 데이터 클래스를 모두 생성해야 한다는 것도 처음 알았고, 어플 내부에서 서버에서 받아온 데이터를 어떻게 굴릴 것인지 바인딩 작업도 필요하다는 것도 처음 알았다. 서버 통신을 하기 위해 레트로핏이라는 라이브러리를 사용해야 한다는 것도 처음 알았고, 서버에서 데이터를 객체로 보내준다면 객체 형식에 맞게 데이터 클래스를 따로 생성에서 그 안에 넣어주어야 한다는 것을 발견하고 입을 떡 벌렸다. 내가 혹시나 같은 뷰에서 API를 여러 번 찌르도록 서버를 개발했었던 건 아니겠지..? 단일 데이터를 아무 이유 없이 객체로 감싸서 보내줬던 것은 아니겠지..? 라는 자기 반성을 많이 하게 된 것 같다. 안드로이드 개발은 어떨지 궁금해서 시작했던 프로젝트에서, 더 좋은 서버 개발자가 되기로 다짐했던 정말 웃픈 순간이었다.
결국 요약하자면 이렇다. 클라 개발자.. 정말 할 일도 많고, 모든 부분에서 꼼꼼해야 한다. 그러니 클라 개발자들이 조금이라도 더 효율적으로 개발할 수 있도록 깔끔한 API를 개발할 수 있는 서버 개발자가 되어야겠다. 라는 것을 느꼈다. 역시 경험이 통해서 배우는 것이 가장 많은 것 같다.
2) 리사이클러뷰와의 전쟁
카드가 기본 요소이다보니 정말 리사이클러뷰가 많이 쓰였다. 위에도 적었지만 조건에 따라 일러스트 및 배경 색, 카드 내부 구성 요소 등이 달라져서 인덱스에 따라서 보여지는 뷰가 다르도록 visibility를 사용해 조절했다. 리사이클러뷰라는게 뭔지도 모르던 내가 했던 고민(이라고 쓰고 삽질이라고 읽는다)들의 목록은 아래와 같다. 아래의 내용들에 대해 시간이 되면 코드로 자세히 남겨놓고 싶은데, 사실 안드로이드 첫 도전이라 내가 시도한 방법이 정답인지는 알 수 없어서 주변 안드로이드 개발자들에게 검사를 맡는 게 우선일 것 같다.. 우선 나중에 내가 비슷한 문제를 마주쳤을 때 해결 방법을 떠올릴 수 있도록 간략하게만 해결 방법을 적어둔다!
* 데이터를 다른 뷰로 넘기는 방법
> bundleOf를 사용해 데이터 변수에 저장 후, Navigation.findNavController(뷰).navigate(이동에 사용할 액션, bundle) 사용
* 리사이클러뷰에 나열되어 있는 카드 중 하나를 클릭했을 때
> 어댑터에서 setOnClickListener 사용
* 리사이클러뷰를 사용해 카드를 나열하는데, 전체 스크롤은 세로이되 가로로 3개씩 채워지도록 하는 방법(그리드 사용)
> app:spanCount="3"/ app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
* 카드를 터치하면 뒤집는 애니메이션을 적용할 때 앞면과 뒷면이 모두 리사이클러뷰일 경우
> CardView 안에 Relative 뷰를 2개 넣어두고 어댑터에서 각각 setOnClickListener 사용
| backcard.visibility=View.GONE; frontcard.setOnClickListener { backcard.visibility=View.VISIBLE mSetRightOut.setTarget(frontcard) mSetLeftIn.setTarget(backcard) mSetRightOut.start() mSetLeftIn.start() val distance = 8000 val scale: Float = context.resources.displayMetrics.density * distance frontcard.setCameraDistance(scale) } backcard.setOnClickListener { frontcard.visibility=View.VISIBLE mSetRightOut.setTarget(backcard) mSetLeftIn.setTarget(frontcard) mSetRightOut.start() mSetLeftIn.start() val distance = 8000 val scale: Float = context.resources.displayMetrics.density * distance backcard.setCameraDistance(scale) } |
* 서버에서 객체 배열을 받아와 리사이클러뷰에 한 번에 넣고 싶을 경우
> fragment 파일에서 어댑터.datas.addAll(응답데이터) 사용
3) 애증의 캘린더
모어 챌린지의 경우 시작 날짜와 목표 연속 일수에 따라 카드마다 다른 캘린더가 그려져야 했는데, 이것을 구현하는데 정말 상당히 매우 까다로웠다. 날짜별로 네모 공간을 할당하는 것은 어렵지 않았는데, 캘린더가 그냥 실선으로만 구성된 것이 아니라 목표 일수에 해당하지 않는 부분은 점선으로 그려져야 했기 때문에 모든 경우의 수를 고려해서 코드를 작성해야 했다. 이 부분에 대해서는 더 효율적인 코드가 존재할지 잘 모르겠다. 깃허브 주소를 첨부할만큼 자랑스러운 코드는 아니지만 우선 구현 성공했다는 것에 의의를 두며..!
4) 이외 느낀 것
안드로이드는 첫 개발이었기 때문에 서비스가 돌아가도록 마무리하는데 성공했다는 것에 대해 만족한다! 예상했던 것보다 협업할 때 주의해야 할 점들에 대해 정말 많이 알 수 있었다. 위에서 적었던 재사용성을 고려한 디자인 요소 변주라던가, 핵심만 남을 때까지 기획을 덜어내는게 중요하다는 것, 한 뷰에서 하나의 API로 필요한 모든 정보를 모두 받아볼 수 있도록 개발하는 것이 클라 입장에서 훨씬 편하다는 것, 서버에서 정보를 보내줄 때는 정말 필요한 형식으로 보내주는 것이 좋다는 것(특별한 이유 없이 단일 데이터를 객체로 감싸서 보내지 말기) 등 직접 경험을 해야만 알 수 있는 협업 꿀팁에 대해 알게 된 것 같아 의미 있는 도전이었다고 생각한다. 아 마지막으로, 첫 안드로이드 개발이었음에도 불구하고 기획했던 모든 기능을 구현하는데 성공했을 뿐만 아니라 서버 개발 및 연결까지 성공했다는 것이 참 뿌듯했다! 서버까지 구현한 팀은 우리 팀이 유일했다.
---
이렇게 개발을 끝낸 후 파이널 발표 날 시연을 무사히 마쳤고, 교수님들께
* 처음 기획에 비해 상당히 정리 되었고, 덜어낼 것들을 모두 덜어내어 훨씬 깔끔해졌다. 서비스 목적이 매우 좋기 때문에 공모전 같은 곳에 출품하여 지원금을 받아 더 디벨롭해보는 것도 좋을 것 같다.
* 색감을 굉장히 잘 썼다. 대신 사용된 색이 많아서 미션 종류마다 카드가 다르게 보이게 하는데 색이라는 요소를 쓸 수 없어 어려웠을텐데 캘린더와 프로그레스 바라는 모양이 다른 요소를 적절히 사용해 확실히 구분되어 보일 수 있게 한 것이 좋았다.
* 짧은 기간 내에 서버 연결까지 한 것이 놀랍다. 안드로이드 첫 개발인데 기획한 모든 기능을 구현한 것이 대단하다. 퀄리티가 좋으니 꼭 배포를 해보기를 바란다.
라는 피드백을 받으며 성황리에 마무리했다 :)
배포까지 마치면 좋았을텐데 안드로이드 기기 별로 뷰가 다르게 보이는 것을 컨트롤하는데 미숙해서 아직 플레이스토어에 올리지는 못했다. 만약 교수님 말씀대로 조금 더 디벨롭을 할 수 있는 기회가 생긴다면 코드도 조금 더 효율적으로 만져보고, 뷰도 최대한 많은 기기에서 디자인대로 보일 수 있도록 비율을 맞춰서 작업한 후 배포해보고 싶은 서비스다! 멋진 벗들과 함께 멋지고 의미 있는 서비스를 만들어볼 수 있어서 참 즐거웠던 경험이었다.
'Project > Client' 카테고리의 다른 글
| find my Roomie - 내 룸메이트 유형 찾기 테스트 개발기 (React에서 카카오링크 기능 적용하기) (7) | 2021.02.25 |
|---|---|
| 첫 리액트 개발 도전기(2) - 일을 시작하는 순간, motiiv (0) | 2021.02.17 |
| 첫 리액트 개발 도전기(1) - 일을 시작하는 순간, motiiv (2) | 2021.02.16 |
| [Unity] Vuforia를 활용한 증강현실 종합 생일 선물 세트 제작 (0) | 2021.02.04 |
| [해커톤] 퐁당 - 나의 심연으로 몰입하는 시간을 제공하는 서비스 (0) | 2021.02.04 |
댓글