2019 년 2 학기 앱 디자인 에 센스 수업 에서 음악 앱 UI 를 제작 하 게 되 었 다 . ​ 전 부터 꼭 들으리라 다짐 했 던 수업 이 었 는데 , 2 학기 부터 는 교수 님 이 바뀌 셔서 일러스트레이터 가 아닌 어도비 Xd 로 작업 하 게 되 었 다 ! 덕분 에 작업 하 는 반 학기 동안 Xd 마스터 가 되 어서 정말 행복 했 다 🥺 ​​ ​ 제작 배경 ​​ ​​ 음악 취향 이 정말 확실 한 사람 으로서 . .. ( 시티 팝 , 펑크 / 디스코 , 인디 락 , 재즈 / 보사노바 등등 , ,,,,,) 본인 의 취향 이 확실 한 사람 들 은 매일 마다 새로운 노래 를 찾 기 위해 발품 을 팔 아야 만 한다 . ​ 4 ~ 5 년 전 ? 초창기 시절 왓 챠 는 나 에게 신세계 였 다 . 대놓고 예상 별점 을 보여 주 니 별점 만 보 고 확실 하 게 내 취향 인 영화 를 파악 할 수 있 었 고 , 또 나 와 비슷 한 취향 인 사용 자 와 의 분석 을 통해 취향 유사 도 까지 보여 주 었 다 . ​ 왜 음악 왓 챠 는 없 을까 ? 내 가 애정 하 는 음악 들 에 별점 을 매기 고 , 예상 별점 4 . 0 점 이상 의 음악 에 두근대 며 찜 하 기 버튼 을 누르 고 , 나 와 비슷 한 취향 을 가진 사용 자 가 내 프로필 의 별점 리스트 를 보 곤 당장 팔 로 우하 고 , 다이렉트 메세지 기능 을 통해 밤새 덕 톡 을 나누 고 . .. 최애 밴드 공연 도 함께 보 러 가 고 . ..,,,,​ 이런 어 플 을 아주 오래 전 부터 원해왔 기 때문 에 . .. 좋 아 하 는 음악 취향 , 좋 아 하 는 아티스트 , 좋 아 하 는 장르 가 확실 한 , 마이너 덕 후 들 의 소중 한 취향 , 행복 한 덕 질 을 위해 앱 을 기획 하 게 되 었 다 . ​​ 새콤 어쩌구 . . 매력 적 어쩌구 . . 글자 수 맞추 려고 적 으면서 조금 항마 력 부족 해졌 음 ​ FLO , VIBE 같 은 어 플 과 유사 하 지 않 냐 ? ! 하 는데 , 내 가 가장 중요 하 게 생각 하 는 점 은 ​- 직관 적 으로 보이 는 예상 별점 아무리 고도 화 된 인공지능 이 추천 하 여 화면 제일 위 에 띄워 준다고 해도 그 수 가 많 으면 넘겨 버리 게 된다 . 넷플릭스 에서 뭐 보 지 하 며 한 시간 동안 뒤적이 는 것 처럼 . .. 그 대신 4 . 3 점 4 . 7 점 이런 식 으로 별점 이 표시 되 다면 이렇게 나 높 다구 ? !? 하 며 신뢰 를 얻 게 된다 . ..​- 타 사용자 와 의 커뮤니케이션 단순히 아티스트 정보 란 , 앨범 정보 란 에서 댓글 로 감 상평 남기 고 말 것 이 아니 라 직접 본인 의 프로필 을 관리 하 고 , 플레이 리스트 를 짜 고 , 덕 후 와 의 만남 을 기다리 며 두근대 다 . .. 정말 나 라면 프로필 설명 란 에 ' 타히티 80 과 야마시타 타츠로 에 진심 인 사람 입니다 . .. 24 시간 덕 톡 나눌 분 을 찾 읍니다 . ..' 이런 거 적 어 놓 을 듯 . ..​​​ ​ 네이밍 및 로고 ​ ​ 어 플 이름 을 곰곰히 생각 하 다 , 내 가 넘 사랑 하 는 노래 인 에이미 와인하우스 의 체리 를 듣 다가 단순히 좋아하 는 감정 을 넘 어 ' 소중히 여기 고 아끼 다 ' 란 의미 의 Cherish 를 떠올렸 다 . ​ Cherry 의 가사도 ' 방금 만난 체리 는 너 보다 더 날 잘 이해 해 줘 . 넌 내 가 울 면 신경 도 안 쓰 겠 지만 , 체리 는 내 가 외로울 때 곁 에 있 어 줘 . ' 라며 반전 으로 I ' m talking about my new guitar 하 고 끝나 는 것 도 . 음악 어 플 의 네이밍 서사 에 완벽히 부합 한다 생각 했 다 💗 ​ 로고 는 CHERISH 의 C R 을 합친 형태 고 , 그 모양 이 꼭지 가 달린 체리 로 도 , 음표 로 도 보이 게 배치 했 다 . 사실 좀 더 예쁘 게 만들 고 싶 었 는데 초안 그대로 고 다고 . ..​​ ​​ 앱 UI 디자인 ​​ ( 1 ) 초기 화면 ​ 초기 실행 화면 초안 ​ 이중 톤 이미지 와 볼드 한 고딕 폰트 컨셉 을 잡 아 작업 했 다 ​ 교수 님 께서 UI / UX 는 나무 가 아닌 산 을 보 라며 전체 적 으로 보 았 을 때 거슬리 고 튀 는 곳 이 없 어야 한다고 지적 해 주 셨 다 . ​ 초기 실행 화면 최종 안 ​ 사실 로그인 버튼 은 초안 모양 이 더 좋 았 는데 . .. 뭐 이것 도 나쁘 지 않 아 ​ 흰 상단 에서 점점 물 들어가 는 것 처럼 폰트 두께 를 달리 하 여 배치 했 다 . Cherish 는 동사 지만 . .. 한편 어 플 이름 이 기 도 하 니까 문법 은 무시 하 고 For your cherish musics ! 로 ​ 이미지 는 3 초 ? 마다 천천히 디졸브 되 며 유명 아티스트 의 이미지 가 교차 되 는 형식 을 생각 했 다 . 넘 좋 아 하 는 이미지 들 . 마이클 잭슨 의 슈퍼볼 사진 , 커트 코베인 국 룰 의 담배 기타 사진 , 초 안 에서 쓴 데이비드 보위 사진 . 😭💗 ​​​​ 로그인 화면 ​ 서비스 약관 동의 . . 뿌연 이유 가 ㅠ Xd 에서 pdf 내보내 기 했 는데 그림자 효과 설정 된 애기 들 은 흐릿 하 게 깨 지 네 거슬린다 ​​ 좌 분석 화면 초안 / 우 분석 화면 최종 안 ​ 어 플 을 최초 실행 하 면 어 플 인공지능 이 음악 보관함 을 분석 한다 . 공연 앱 Songkick 에서 최초 실행 시 보관함 을 스캔 하 던 데 에서 고안 했 다 . ​ 원래 는 원 안 이 물결치 듯 차오르 며 퍼 센 테이지 가 올라가 도록 했 는데 , 썩 세련되 지 가 않 아서 우측 으로 갈아엎 었 다 . ​​​ 분석 이 끝나 면 3 단계 에 걸쳐 인공지능 이 분석 한 음악 취향 을 보여준다 . 아티스트 전곡 대비 음원 소유 비율 ( 예 를 들 자면 . .. 타히티 80 의 전 앨범 , 전곡 소유 중 . ..), 음악 재생 빈도수 등 을 통해 취향 을 분석 한다 . ​ 1 단계 는 아티스트 취향 및 순위 , 2 단계 는 곡 취향 및 순위 ​​ 여기 를 눌러 수정 해 주 세요 ! 를 누르 면 오른쪽 화면 이 뜸 . 인공지능 이 분석 한 10 위 까지 의 음원 이 나오 고 , 여기 에 도 없 다면 검색 해서 수정 하 면 됨 . ​ 곡 순위 는 프로필 내 명예 의 전당 란 에 보여진다 . 이러 한 기능 이 있 으니 곡 순위 도 상당히 신중 하 게 고를 거 라 생각 했 다 . ​​ 3 단계 는 좋 아 하 는 장르 . 어느 정도 의 비율 로 좋 아 하 는지 도 표시 된다 . ​​​​​ 초기 화면 프로토타입 ​​​​​​​​ ​​( 2 ) 메인 화면 ​​​ 홈 화면 . ​ 마음 에 쏙 들 음악 , Jamiroquai 를 좋아한다면 ( 아티스트 기반 추천 음악 ) 등 의 추천 리스트 가 뜬다 . 오른쪽 화면 은 자미로콰이 를 좋아한다면 전체 보 기 를 누른 화면 ​ 저 막대기 는 예상 별점 을 단순 화 한 것 . 회색 막대기 는 내 가 별점 을 준 것 . ​ 개인 적 으로 이 두 화면 넘 넘 애정 함 . . 조화 로 와 ~~~​​ 검색 화면 ​ 키보드 오버레이 도 넣 어 둬서 검색창 누르 면 키보드 가 뿅 나온다 ​​ 검색 화면 에서 앨범 을 누르 면 앨범 정보 란 으로 넘 어 온다 모든 음악 들 은 클릭 시 평가 / 리스트 추가 / 보관함 저장 창 이 뜬다 ​ 음악 보관함 저장 을 누르 면 애플뮤직 사용 시 애플뮤직 과 연동 되 어 음악 보관함 에 추가 됨 음원 찾 는 어 플 Shazam 에서 찾 은 음악 은 애플 뮤직 으로 바로 저장 해 주 길래 거기 서 고안 했 당 ​​ 프로필 화면 ​ 명예 의 전당 을 클릭 하 면 상위 10 곡 이 쭉 뜬다 마치 . .. 스팀 아트워크 전시대 를 꾸미 는 느낌 이 랄까 ? ​​ 나름 신경 쓴 부분 스크롤 이 올라가 더라도 해당 프로필 사용 자 이름 이 뜨 도록 함 ( 트위터 ui 참고 함 ) ​​​ 플레이 리스트 UI 는 애플 음악 보관함 UI 와 매우 흡사 합 니 동 왓 챠 에서 개인 이 만든 리스트 를 스크랩 할 수 있 는 것 처럼 체리쉬 에서 도 타 유저 의 플레이 리스트 를 스크랩 할 수 있 음 ​​​​​ 메인 화면 프로토타입 ​ Jamiroquai 를 좋아한다면 상단 바 가 줄어드 는 거 보여 준다고 화면 와리 가리 했 다 뭔가 약간 씩 깨져 보이 는 건 gif 만든 다구 . ..​​​​​​​​ 검색 화면 프로토타입 ​​​​​​​ 프로필 화면 프로토타입 ​​​​​​​​ ​​ 후 작업 ​​​ ​ 프로젝트 할 당시 아이폰 7 이 어서 아이폰 7 사이즈 로 제작 했 다 근데 오늘 딱 삘받구 블로그 에 제작 일지 작성 하 려고 보 니까 아이폰 X 디자인 으로 작업 하 고 싶 어서 허버 허버 재 작업 ​​​ 그렇게 제작 된 아이폰 11 사이즈 의 간단 한 홍보 용 이미지 이거 보고 몇 명 낚였 음 진짜 출시 했 녜 아니 . .. 학점 용 어 플 이 야 . ..(?)​​ 여 튼 작년 하반기 제일 즐겁 게 작업 했 다 그래픽 디자인 과 는 다르 게 창작 의 고통 은 ( 상대 적 으로 ) 적 고 , 1 px 차이 의 미세 한 간격 을 조절 해 가 며 최대한 심미 적 이 고 세련 되 고 시장 에 출시 해도 될 만 한 퀄리티 의 UI 디자인 을 뽑아내 는 게 정말 미친 듯이 재밌 었 다 ! !!!​ UI 수업 또 듣 고 싶 다 . .. 아님 뭐 창업 동아리 를 하 든 앱 디 외주 를 맡 든 UI 작업 또 하 고 싶 다 . ...... 심심 한 휴학생 . . 앱 만들 일 있 음 디 잔 해드림 니다 . ... UI 작업 하 며 희열 을 느끼 고 싶 어요 . ... 그럼 . .. 20000 희 ​​​​​