도리스 블로그

브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문 브런치 홈상하 스크롤로 컨텐츠 사이를 이동한다. 이전, 다음 전환 시 기존 화면의 크기가 축소되면서 사라진다. 배경이미지와 텍스트는 시간차를 두고 등장한다. 웹사이트의 패럴랙스 스크롤처럼. File drawer, Card index, iOS safari 글본문읽기 상태로 돌입하면 글 내용과 관련 없는 요소들은 화면에서 사라진다. 최상단의 상태바까지 생략되는 넓은 화면. 내용을 읽다가 위로 스크롤 하면 화면 상단에 툴바가 나타난다. 티스토리 앱 메뉴좌측에서 메뉴가 나타나면서 기존 화면의 크기가 축소되면서 어두워진다. 검색 매거진 글목록 시작 화면에 매거진 제목, 작성자, 관련태그, 구독신청, 인기도 표시(구독수, 공유수)가 있다. 매거진 느낌을 살..

스마트폰 화면에서 컨텐츠 영역 넓게 사용하기. 스마트폰의 작은 화면에서 컨텐츠 영역을 넓게 사용하기 위한 방법으로 화면 상하단의 영역을 숨겼다가 보여주는 식의 방법이 사용된다. 화면을 위로 밀면 상단 영역이 축소되거나 내비게이션 바로 변화되면서 최소화 되고, 주요 컨텐츠를 볼 수 있는 공간이 늘어난다. 다시 화면을 아래로 당겨 컨텐츠의 최상단으로 이동하면 최소화 되었던 상단 영역이 원래데로 돌아온다. 상단 컨텐츠 영역이 축소되는 사례 (iOS) 네이버 블로그 (mobile web) 유튜브 (mobile app) 상단 비쥬얼 영역이 내비게이션 바로 전환되는 사례 (iOS) 네이버 밴드 (mobile app) 벅스뮤직 (mobile app) 브라우저 자체적으로 상하단 축소, 숨김 사례 (iOS) 사파리 브라..