LEEO TIL Dev Log

개발자 혼자 토이 프로젝트를 하기 어려울 때, 인사이트를 얻기 위해 사용하는 앱 입니다. 디자이너를 위한 앱이라 그런지 디자인 적으로 굉장히 아름답다고 생각하면서 쓰고 있었는데, 이번에는 좀 더 들여다 보면서 UI/UX적으로 스스로 얼마나 볼 수 있는지 정리하고자 선택하게 되었습니다. 앱의 시작 런치 뷰 부터 감동이었습니다. 보통 스켈레톤은 디테일 페이지나, 다른 뷰로 넘어갈 때 로딩화면으로 쓰이는 걸로만 봤습니다. HIG에 보면 런치 뷰(앱의 맨 처음 시작화면)를 첫 화면과 비슷하게 구현해야 사용자가 기다림을 많이 느끼지 않고 무엇이 나올지 미리 예상할 수 있어서 앱을 바로 사용하기에 좋기에 권장하고 있는 방식입니다. 하지만 보통 기업의 앱은 광고 모델이 들어가거나, 자신들의 로고가 들어갑니다. 이해가 안돼는 부분은 아닙니다. 광고하기에 정말 좋은 포인트 이기 때문에 광고를 넣는 것 이라고 생각하기 때문입니다. 첫 화면과 런치뷰가 비슷하게 생건 것을 본 적이 없었는데, 처음으로 경험했고 매우 좋은 경험이었습니다. 앱의 구조 탭바로 되어있습니다. 총 5개의 메뉴이고, 탭바에는 아이콘만 그려져 있습니다. 홈, 검색, 동영상, 알림, 내정보 로 구분되어있는 것 처럼 보였습니다. 너무나 직관적인 아이콘이라 탭바에 글자로 설명이 필요해 보이지 않았습니다. 상단의 인스타그램의 스토리 처럼 구성된 동영상, 사진이 상단에 있었습니다. 그 뷰를 제외한 나머지는 카드로 이루어 져 있었습니다. 이미지가 로딩이 되어있지 않을때는 검정색 이미지를 플레이스홀더로 사용했고 쉐도우를 주어 약간 볼록 튀어나와 보이게 만든 카드가 굉장이 이뻐보였습니다. 플랫한 카드의 앱스토어와는 다른 매력이 있어 보였습니다. 개인적으로는 플랫 디자인 보다는 이게 더 입체감 있고 좋았습니다. 검색 굉장히 독특한 느낌의 검색이었습니다. 일단 하단에 필터가 상시로 떠 있어서 약간은 거슬리지만, 사라지지 않아 원할 때 마다 바꿀 수 있어서 좋았습니다. 이미지 검색은 컬렉션 뷰로 구현되어 있는 것 처럼...

얼마전까지만 해도, 무겁고 낡아서 안쓸만한 앱이라고 생각하고 있던 쇼핑몰 앱 중 하나인 G마켓 앱을 다시 써 보았는데, 굉장히 많이 달라졌고 또 좋아져서 한 번 살펴보자! 하는 마음에 탐구를 시작하게 되었습니다. 앱실행 앱을 실행해서 가장 첫 페이지에 들어갔을 때, 서치 뷰컨트롤러에 애니메이션에 눈이갑니다. 런치에 애니메이션이 들어간게 아닌, ViewWillAppear 때 애니메이션을 실행해줍니다. 동시에 탭바의 스마일 버튼도 같이 웃어줍니다. 시선이 분산되는게 조금 아쉬웠지만, 여러 애니메이션이 있어서 역동적인 느낌을 받았습니다. 또한 강조하고 싶은 메뉴에 빨콩(?) 버튼이 있어서 배너와 빨콩에 손이 먼저 갔습니다. 탭바 메뉴들 검색 검색은 탭바 메뉴에 있는데, 모달로 올라오는게 조금 신기한 느낌이었습니다. 하지만 검색을 하고나면, 네비게이션 푸쉬를 해 주고, 팝을 했을 떄, 메인 페이지로 돌아가는 동선이 낯설었습니다. 뒤로가기를 눌렀는데 내가 온 곳으로 돌아가지 못하기 때문에 그렇게 느꼈나봅니다. 스마일 스마일 클럽을 위한 공 소개입니다. 이 페이지 또한 탭바인데, 모달처럼 오른쪽 위에 닫기 버튼이 있습니다. 누르면 홈 탭으로 돌아갑니다. 마이페이지 마이페이지 탭바의 메뉴중 하나입니다. 하지만 누르면 네비게이션 푸쉬가 됩니다. 뒤로가기를 누르면 이전에 있었던 페이지로 돌아갑니다. 히스토리 매우 인상적인 페이지였습니다. 동작은 마이페이지 처럼 화면전환이 있지만, 그 내용은 사용자의 행동정보가 남아있습니다. 검색기록, 상품조회 등이 타임라인으로 남아있습니다. 내가 아이 쇼핑을 했던 내역을 돌아보며 아까 마음에 들었던 물품으로 돌아가기 좋아보였습니다. 탭바의 이미지가 가장 최근 상품의 썸네일로 변하는 것은 사용자의 호기심을 자극하기 충분해 보였습니다. 하지만 상품의 크기가 다르기 때문에 떄로는 이쁘지만 어쩔때는 이상해 보였습니다. 성능 사용하는데 답답함을 느끼지 못했습니다. 로딩뷰가 있긴 하지만, 기본적으로 로딩이 굉장히 빠르다고 느꼈...

평소에 가장 많이쓰기도 하고, 잘 만들었다고 생각되는 앱 중 하나인 Toss 를 살펴볼까 합니다. 서비스의 기능을 살펴 본다기 보다는, 앱을 똑같이 구현해야 하는, 그리고 사용자의 입장에서 느낀 점들에 대해서 적어 보겠습니다. 레이아웃 2021년 현재 총 5개의 탭바로 이루어져 있습니다. 첫 탭 페이지는, 가장 필요한 기능인 계좌와 잔액을 보여줍니다. 잔액을 보기위해 매번 로그인을 할 필요가 없습니다. 보통 은행앱의 경우 로그인을 해서 진입하고 진행을 보여주는데, 토스앱을 정확한 동기화는 아닌 금액을 첫 페이지에 바로 보여줍니다. 그리고 상세 계좌로 진입하면, 로그인을 하고, 동기화를 해서 정확한 잔액을 보여줍니다. 어찌보면 조금은 부정확한 데이터 이지만, 게으른 로딩을 해서 매번 로그인을 해야하는 사용자의 귀찮음을 덜어주었습니다. 화면은 테이블 뷰와 섹션으로 이루어져 있습니다. 심플한 구성이, 한 번 구현해 볼만 한 페이지 인 것 같습니다. 나머지 탭은 소비달력, 혜택, 주식, 전체로 각각의 토스라는 앱을 구성하는 큰 기능들이 들어있습니다. 기본 탭바와는 다른 동글동글한 탭바가 매우 마음에 들었습니다. 기본적으로 셀들도 둥근 코너를 가지고 있습니다. 마음에 들었던 UX 화면 오른쪽 상단에 종 모양을 누르면 나에게 오는 알림이 나열됩니다. 이 기능은 일반적이지만, 그 중 하나를 누르면 관련있는 내용들을 묶어서 하나로 만들어 줍니다. 이 기능도 한 번 구현해 보고 싶습니다. 여담이지만 다른 앱들의 알림창보다 토스의 알림창을 훨씬 자주들어가는 느낌입니다. 푸쉬가 로그성이 아닌 정보의 전달이기 때문에 그런걸까요? 로딩뷰가 토스트로 구현되어 있고, 로딩 완료도 토스트로 되어있습니다. 로딩중에 사용자의 행동을 방해하지 않는다는 점이 좋았습니다. 로딩이 되는건가? 라는 생각을 들지 않으면서 로딩중의 사용자를 방해하지 않는 배려가 보였습니다. 전체탭에는 엄청나게 많은 서비스들이 잘 우겨넣어(?) 져 있는 것을 볼 수 있는데 상단의 탭바에 기능들이 나...

[UXKit] 앱 탐구 생활 - DarkRoom 2020 Apple Design Awards 를 수상한 앱 중 하나인 DarkRoom(암실) 이라는 앱 입니다. 로고는 산? 모양인데 사진을 편집할 수 있는 앱 입니다. 디자인 상을 받은 앱을 한 번 살펴보겠습니다. Entry point 앱을 실행하자마자 앨범이 나옵니다. 애플의 기본 앨범보다 더 많은 사진을 한 눈에 보여줍니다. 하단에는 요즘 유행하는 모양이 아닌 탭을 볼 수 있습니다. 총 3개의 탭이 있습니다. 상단 네비게이션에는 설정값과 여러 사진에 한 번에 옵션을 적용할 수 있는 일괄적용 버튼이 있습니다. 첫 번째 탭인 최근 항목은 모달로 나만의 정렬된 사진을 볼 수 있습니다. 즐겨찾기, 편집중인 사진, 내가 내보낸 사진, 혹은 태그를 달고있는 사진들 다양한 기준으로 내 사진을 볼 수 있는 것은 굉장히 편리 했습니다. 애플의 기본 사진첩에도 있는 기능이지만 조금 더 쉽게 모아주는 경험을 했습니다. 하지만 선택 후 탭이 바뀌는 기이한? 경험도 할 수 있었습니다. 두 번째 탭인 즐겨찾는 항목과 편집 됨은 첫 번째 탭의 선택사항 중에 포함되어있는 선택지로, 자주 선택되는 선택지인것 같아 보였습니다. 사진 편집 메인 기능인 사진 편집을 살펴보겠습니다. 메인 화면에서 사진을 한 장 클릭하면, 메인 사진이 커지면서 편집할 수 있는 옵션들이 나왔습니다. 자르기, 필터, 채도 및 대비 상세조절, RGB 설정, 스포이드, 여백, 실행 취소 등의 기능이 있습니다. 컨셉 앱의 컨셉이 암실이라, 사용자가 암실에서 사진을 편집해서 하나의 작품을 만들 수 있도록 해주는 앱 이었습니다. 디자인이 어떻게 왜 예쁜지는 잘 모르겠으나, 이 앱을 이용하면 이쁜 사진들을 만들어 낼 수 있을 것 같습니다. 이미지 편집의 기능이 주이며 실제 애플 앨범앱이 디자인 적으로는 더 이쁘다는 생각이 들었습니다.