앱 리디자인 RE:design

안녕하세요!

오늘은 시각 디자인 시간에 리디자인 한 앱을 보여드리려고 해요!

저는 평소에 불편함을 느꼈던 삼성의 기본 음악 어플인 '뮤직'을 리디자인 하기로 했어요!

지금은 삼성 뮤직으로 업테이트 되면서 UI가 많이 바뀌었더라구요!

먼저, 저는 기존에 없었던 앨범 커버를 추가하고 변경할 수 있는 기능과 가사를 추가하고 검색하는 기능을 추가했어요! 그리고 전체적인 디자인은 둥근 느낌으로 바꾸고 색상도 바꾸어주었습니다!

메인화면이에요! 스크롤을 표현하기 위해 아랫부분을 더 만들어주었어요!

기존하고 달라진 점은, 우선 메뉴바를 곡, 아티스트, 장르, 재생목록 이렇게 4가지로 줄였어요! 그리고 메뉴바 디자인도 둥근 모서리의 사각형으로 바꾸어주었답니다!

또, 곡을 찾기 쉽도록 인덱스도 추가해주었습니다!

곡을 누르면 나오는 재생화면이에요!

몇 개의 아이콘은 직접 만들고, 다른 몇개는 찾아서 가져왔어요!

진행뷰같은 경우에는 색이 채워지는 형태로 디자인을 바꾸어주었어요!

재생화면에서 앨범커버 부분을 프레스하면 나오는 팝업이에요!

앨범커버를 변경할 수 있는 화면이에요!

갤러리에서 직접 선택할 수도 있고, 관련 앱을 연동하여 사진을 검색하여 넣을 수 있도록 구성했어요!

앱 연동하기를 누르면 나오는 화면이에요!

곡의 분위기에 맞추어 키워드를 보여주고, 직접 검색을 해서 고를 수도 있답니다!

이미지를 선택하면 저런식으로 체크표시가 나와요!

그리고 우측 상단의 체크 표시를 누르면 완료입니다!

그러면 앨범커버가 바뀐 재생화면이 나와요!

우측상단에 오른쪽에서 세번째 아이콘을 누르면 위와 같은 팝업이 뜨면서 가사를 직접 추가하거나 검색할 수 있어요!

이와 같은 기능은 '알송'에 있는 기능인데요, 이를 따왔습니다!

가사 추가를 선택하면 이렇게 입력을 할 수 있는 화면이 나옵니다!

가사를 입력한 화면입니다!

우측 상단에 체크 아이콘을 누르면 다시 재생화면으로 이동합니다!

재생화면에서 앨범커버 부분을 탭하면 입력한 가사를 보여줍니다!

지금 나오고 있는 부분의 가사를 강조해주었어요!

좌측 상단에 뒤로가기 아이콘을 누르면 다시 곡 리스트가 있는 메인화면으로 이동합니다!

나만, 봄 노래의 앨범 커버가 바뀐 것을 확인할 수 있답니다!

이렇게 XD를 이용해서 앱을 리디자인해보았어요!

저는 포토샵으로 리디자인을 했던 적이 있는데요, 확실히 XD는 더 편리한 점이 많았던 것 같아요! 또, 프로모션으로 직접 모션을 지정해서 어떻게 적용되는지 미리 볼 수도 있어서 편리했던 것 같아요!

다음에는 이번에 작업한 것을 가지고 목업해서, 판넬 작업한 것을 가지고 올게요!