브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문

브런치 모바일앱 UI - Part 1  홈, 글목록, 글본문

 

 

브런치 홈

상하 스크롤로 컨텐츠 사이를 이동한다. 이전, 다음 전환 시 기존 화면의 크기가 축소되면서 사라진다.
배경이미지와 텍스트는 시간차를 두고 등장한다. 웹사이트의 패럴랙스 스크롤처럼.
File drawer, Card index, iOS safari

 

 

글본문

읽기 상태로 돌입하면 글 내용과 관련 없는 요소들은 화면에서 사라진다. 최상단의 상태바까지 생략되는 넓은 화면.
내용을 읽다가 위로 스크롤 하면 화면 상단에 툴바가 나타난다. 
티스토리 앱

 

 

메뉴

좌측에서 메뉴가 나타나면서 기존 화면의 크기가 축소되면서 어두워진다. 

 

 

검색

 

 

매거진 글목록

시작 화면에 매거진 제목, 작성자, 관련태그, 구독신청, 인기도 표시(구독수, 공유수)가 있다.
매거진 느낌을 살려 각각의 연재를 소책자 형태로 나열하고 한 화면에 하나씩 배치했다.  
목록의 마지막에 소셜공유 기능이 자리하고 있다. 

 

 

매거진 글목록, 처음으로

하단의 '처음으로'를 탭하면 매거진의 처음으로 이동한다.

 

 

매거진 글목록, 모아보기

하단의 '모아보기'를 탭하면 한 화면에 여러 개의 기사가 나열되는 형태의 뷰로 보여준다.

 

 

 

매거진 구독신청 및 취소

버튼을 탭 할 때마다 '구독하기'와 '구독중'으로 레이블이 바뀐다. 버튼을 통해 구독 상태를 알 수 있다.
탭 할 때 버튼의 레이블과 색상이 변하는 애니메이션이 재생되는데 상태가 바뀌는 것을 인지하는데 도움이 되는 것 같다.
구독취소의 경우 네이버 포스트에서 팔로잉 취소할 때 확인창을 거치는 것과 편리함에서 비교가 된다. 

 

 

네이버 포스트 팔로우 설정 및 취소

팔로우 했다가 다시 탭하면 팔로우가 취소가 되는데 취소 확인창을 띄운다. 
브런치 앱에서 구독신청 및 취소 기능을 사용해보니 확인창을 거치는 것이 번거로운 절차라는 생각이 든다. 

 

 

관련 글

브런치 모바일앱 UI - Part 2 글쓰기