취소
다음에 대한 결과 표시 
다음에 대한 검색 
다음을 의미합니까? 

제목:

One UI 화면전환 콘셉트 디자인 만들어봤어요! : Z 방향 계층 구조

(게시글 작성 시간: 04-19-2020 03:26 PM)
598 보기
imAsking
Expert Level 3
옵션
기타
One UI의 불편한 점을 생각하고, 편하게 개선할 수 있는 방법을 고민하다가 화면전환 콘셉트 디자인을 만들어봤어요! 😍


삼성의 One UI는 모든 모바일 기기에서 최대한 쉽게 작동하도록 만들어졌다는 장점이 있어요.

  • 양 손으로 기기를 쓰는 경우
  • 한 손으로 기기를 쓰는 경우
  • 태블릿 크기 이상의 기기를 쓰는 경우
  • 폴더블 기기를 쓰는 경우
  • 베젤링으로 기기를 쓰는 경우

OneUI는 이렇게 많은 경우에서도 똑같이 쉽게 사용할 수 있어요. 그렇지만 문제점도 있어요.

  • 한 손으로 큰 기기를 잡은 채 화면 여러곳을 터치하는 상황
  • 한 손으로 Galaxy Note 기기를 잡고, S펜으로 드로잉 외 기기를 조작할 경우 S펜은 화면터치 이상의 기능을 못 해요
  • 조작방법이 단순해서, 많은 정보를 담은 앱을 탐색할 때 시간이 많이걸리고 복잡해요. (캘린더, 내 파일 등)

이 문제의 공통점은, 

원하는 동작을 실행하기위해서 손을 화면의 여러 곳으로 이동하며 많은 동작을 수행해야하는 점 이라고 생각했어요.

그래서 간단한 화면 전환과 네비게이션을 중심적으로 생각했어요. 



간단히 3줄로 요약하면

  • 수평적인 앱을 수직적으로 분류하고,
  • 각각 크고작은 계층구조를 만들었어요.
  • 그 사이를 이동할 수 있는 네비게이션을 터치, 롱프레스, 스크롤, 핀치 투 줌, S펜 버튼을 이용해서 만들었어요.




image
갤러리 앱의 주요 페이지를 폴더별로 수직 정렬 한 모습이에요.이 수직으로 나누어진 페이지가 모여서 앱이 되요.


우선, 네비게이션과 화면 전환을 하기위해, 화면 구조를 새롭게 정렬했어요.

기존 One UI는 플랫 디자인의 매우 수평적인 화면 구조를 갖고있지만, 저는 이 x, y방향으로 이어진 수평적인 구조에 z방향을 추가해서 수직적인 구조를 생각했어요.

수직으로 정렬되는 페이지는 분류별로 나눠서
큰 분류를 위쪽에 있는 계층으로, 작은 분류를 아래쪽에 있는 계층으로 배치했어요.


이렇게 하나의 앱에서 여러개의 계층을 만들어 낼 수 있어요.

이것을 저는 "작은 계층"이라고 이름을 지었어요.


image
One UI에서 사용되는 화면을 계층별로 분류한 사진.크게 "홈 런처 / 앱 / 로그인 / 계정" 으로 나누어지고 이 4개의 분류는 각자의 분류 안에서 또 수직적으로 분류되요.


그 다음은 One UI에서 사용되는 모든 화면을 계층으로 분류하는 것이에요.

하나의 앱 안에서 합쳐진 계층들은 작은 크기의 분류에요. 전체적인 안드로이드 오퍼레이팅 시스템에는 영향을 주지 않아요. 

왜냐면 앱 안에서 수직적인 분류를 만들고 그 사이를 이동하더라도, 그것은 앱이 최 상단에 띄워진 상태로 그 안에서 실행되고있는 것이니까요.

그래서 서로 간섭할 수 없는 6개의 큰 계층을 만들고,
독립적으로 실행될 수 없거나, 매우 일시적으로 실행되고 종료될 수 있는 큰 계층 2개를 모아서

총 8개의 큰 계층으로 One UI의 모든 화면을 분류했어요.

이것을 저는 "큰 계층"이라고 이름을 지었어요.

image
(⚠️시간이 많은 분들만 사진을 봐 주세요.) One UI에서 사용되는 화면을 8개의 카테고리로 분류했어요.


이렇게 화면을 모두 수직적으로 분류하고나면, 화면 전환을 했을 때, 원하는 페이지로 이동할 수 있는 구조에요.

그리고 x, y 방향으로 이동하는 것 외에 z방향으로도 이동할 수 있어서, 한 페이지에서 이동할 수 있는 다른 페이지의 수도 크게 늘릴 수 있을거에요.





터치


가장 기본적인 화면 전환 네비게이션은 터치에요.
터치 인터페이스에서는 터치로 모든 기능을 수행할 수 있어야해요.

터치는 점이기때문에, 무거운 특성을 갖고있어요. 그래서 주로 하향식으로 분류와 계층을 내려가는 페이지 이동에 쓰인다는 개념을 잡았어요.

그렇지만 터치는 상향식으로도 사용될 수 있어요. 왜냐하면 터치는 x, y, z방향 어디에서나 독립적인 점이기 때문이에요.


롱 프레스


image
플로팅 아이콘을 롱 프레스로 눌러서 실행하는 모습이에요.



롱 프레스를 쓰면, 터치한 영역에 깊이를 느끼고 집중할 수 있어요. 그래서 기능에 대해 미리 알 수 있는 라벨 토스트를 제공하거나, 여러 단계의 페이지를 뛰어넘을 때 사용할 수 있게 디자인해야해요.


스크롤


스크롤은 선의 개념으로, 터치의 화면 전환 네비게이션의 기능을 부드럽게 대신 할 수 있도록 계획했어요.


image
큰 계층을 이동하기 위해서는 아래➡️ 위 스크롤을 사용해요.

아래에서 위로 스크롤하면, 위 쪽의 큰 계층이 화면 위로 들어올려지고 아래 쪽에 있는 큰 계층이 확장되면서 나타나는 화면 전환이 일어나요.

아래➡️ 위 스크롤을 사용하면 큰 계층을 하향식으로 이동할 수 있어요.

주로 제스처 네비게이션, 앱 스위처, 잠금화면 제스처 등을 이용해서 화면을 전환해요.

image
큰 계층의 안에있는 작은 계층끼리 이동하기 위해서는 위➡️ 아래 스크롤을 사용해요.

위에서 아래로 스크롤 하면, 아래쪽의 계층이 축소되고 위쪽의 계층이 화면 아래로 밀려내려와서 화면 전환이 일어나요.

이처럼 스크롤을 이용하면 수평적으로 이동할 수도 있고, 수직적으로도 화면을 이동할 수 있을거에요.

그리고 한 손으로 기기를 잡을 때 터치를 줄일 수 있어서, 기기를 안전하게 사용할 수 있어요.


image
스크롤이 끝나는 지점에 Z방향 계층으로 이동하는 기능을 추가 했어요. 왜냐면, 스크롤의 제한이 없어질 때 정보가 끊임없이 이어지고 앱에대한 집중도가 높아지기 때문이에요.


주로 애플리케이션 내에 상위 카테고리로 이동힐 수 있는 스크롤 기능을 추가하면, 위➡️ 아래 스크롤로 화면 전환 기능을 쓸 수 있어요.


image

작은 계층끼리 이동하는 위➡️ 아래 제스처로는 큰 계층끼리 이동할 수 없어요. 

큰 계층은 아래➡️ 위 제스처로 이동해요.

이 둘이 확실히 나눠져야 사용자가 작은 계층과 큰 계층을 구분할 수 있어요.


핀치 투 줌


핀치 투 줌은 작은계층끼리의 이동에 사용해요.

핀치 투 줌은 시작할 때 만들어내는 면의 크기와 종료할 때 만들어내는 면의 크기의 차이에 따라 확대와 축소를 구분하는데요.

그렇게 되면, 핀치 투 줌의 화면 확장과 축소를 통해 위 아래 계층을 자유롭게 이동할 수 있어요

핀치 투 줌은 모든 화면에서 작동이 가능하므로, 작은 계층 이동을 위해 화면의 여러 지점으로 손을 움직여서 터치 할 필요가 없어요.


image
한 번의 핀치 투 줌 인으로 2개의 작은 계층을 건너뛰는 모습.


S펜 제스처 기능 추가


image
버튼을 상하좌우로 스크롤 해서 핀치 투 줌의 기능을 실행해요. 버튼의 제스처는 에어 액션처럼. 커스터마이징이 가능해야해요.


갤럭시 노트10에서 처음 지원 된 에어 액션처럼, 제스처를 이용해서 기능을 실행 할 수 있는 방법을 생각 해 보았어요.

다만, 에어 액션이 기기와 먼 거리에서의 기능 실행을 유용하게 만들었다면, 

버튼으로 제스처를 하는 방법은 S펜을 화면 가까이에서 잡은 상태에서 다른 한 손으로 터치하거나 S펜의 펜촉을 직접 스크린에 대는 방법을 이용하지 않고, 기능을 실행하는 중간거리의 입력기 기능이에요.

상하 스크롤은 핀치 투 줌의 네비게이션 기능 혹은 화면확대축소 기능을 지원하고, 좌/우 스크롤은 앱에 맞는 기능을 실행할 수 있게 지원하면 좋을 것 같아요.







링크삭제


사진을 10개까지밖에 첨부할 수 없어서 간략히 제가 만든 콘셉트에 대한 설명을 드렸는데요, PDF파일이나 S노트 파일(SPD)을 이용하면, 69페이지 정도로 자세히 작성했어요. 

콘셉트에 대해 궁금하신 분들은 링크로 문서를 다운로드 하셔서 보실 수 있어요.



긴 글 읽어주셔서 감사합니다😊
19 댓글
Anonymous
해당 사항 없음
기타
히익...이런 제안글 좋아요😆👍👍
*참고로 PC버전에서 쓰시면 사진 첨부 제한이 없어요ㅎㅎ
imAsking
Expert Level 3
기타
와우! 그것은 처음 아는 사실이네요.😮
좋은 정보와 평가 주셔서 감사합니다 ^ㅅ^
코드맨
Active Level 10
기타
PC버전으로 올리면 사진 제한이 없군요. 모르고 있었네요.
너라스님 감사합니다.
노트북9
Active Level 6
기타
대단하시네요.. 이정도면 삼성에서 돈주고 사가야 하는 아이디어같은데 공짜로 아이디어 제공해 주시네요. 삼성에서 꼭 채택하길 바랍니다.
imAsking
Expert Level 3
기타
삼성에는 대단한 사람이 많이 있어서, 여러가지의 아이디어가 있다고 생각해요. 그렇지만, 제 아이디어가 거기에 도움이 된다면 좋겠네요 😆
JINU_
Expert Level 5
기타
흥미롭네요. 다만 이루어질 가능성이 많이 없는 게 아쉬울 따름입니다. 저리 구현하려면 정말로 프레임워크나 라이브러리도 많이 뒤엎어야 되고.. 앱 기초 설계 자체도 많이 바꿔야 될 거에요. 그래도 잘 봤습니다 🙏
imAsking
Expert Level 3
기타
좋은 평가 감사합니다 😊
콘셉트로는 떠올릴 수 있지만 실제로 적용하기위해서 많은 시간이 필요해요! 여기에 시간 부족으로 적진 못했지만, 핀치 투 줌의 경우 화면의 몇%까지 핀치 투 줌을 이용했을 때 액티비티 간 전환이 될 것인지, 어떤 모듈을 활용할것인지 등 실제로 개발 상황을 가정하지못했어요.
그렇지만 제가 다른 좋은 아이디어를 상상할 수 있는 동기부여가 되면 좋겠네요 🥰
Serenity
Active Level 9
기타
와... 정말 대단하신 것 같아요 😍😍
imAsking
Expert Level 3
기타
고 평가를 해 주셔서 감사합니다 😘
강화유으리
Expert Level 4
기타
지금의 ONE UI도 마음에 들지만 imAsking님이 작성해주신 여러 제스쳐에 대한 제안들이 적용된다면 좀더 나은 ONE UI가 될 것같네요 ㅎㅎ

글 정말 잘 봤습니다. 내용도 적당하고 잘 정리해주셔서 보기 편했어요☺☺

imAsking
Expert Level 3
기타
에~ 제가 쓴 글이 길었는데 쉽게 읽으셨다니 대단하시네요👏
멋진 평가를 받았어요. 정말 감사합니다! 😊

좋은 기능이 적용되서 삼성제품들이 더 쓰기 좋아져서 사기도 좋아지면 좋겠네요 >ㅂ< 💸
HappyBono
Active Level 3
기타
핀치 투 줌의 경우 기존은 줌인 + 줌아웃 기능과 겹치고 몇 제스처가 현재 웹브라우저 상의 스크롤과도 겹치는데 이렇게 중복되는 제스처를 어떻게 탈피할 것인지 고안이 필요할 것 같습니다. 컨셉을 만들기는 쉬워도 실제 제품에 적용되기 어려운게 이러한 경우거든요. 기존 제스처 활용기능과 중복 및 충돌이 많이 되네요.
imAsking
Expert Level 3
기타
그 점은 제가 더 고민해야 할 점이네요 🤔 좀 더 생각을 깊게 해야겠어요.

PDF에 보시면, 핀치 투 줌 제스처의 경우 확장 가능 앱바가 사용 가능 할 경우, 액티비티가 전체화면을 사용하지 않고, 줌 인/아웃의 기능이 없는 경우에 사용 가능하는 것을 생각했어요. 만약 이 경우에 포함 될 경우(삼성인터넷, 삼성비디오, 삼성카메라 등) 줌인 줌 아웃 기능을 제공하다가 더 이상 줌 아웃을 진행할 수 없는 상황에서 한번 더 핀치 투 줌을 이용하면 계층이동이 되는 경우를 생각했어요.
그리고 제스처의 경우 큰 계층끼리의 이동은 기존의 제스처 네비게이션과 앱 스위처, 잠금화면에서의 제스처를 활용하고, 작은계층끼리의 이동은 스크롤을 최상단까지 이동했을 때, 기존 One UI는 스크롤이 리플 애니메이션을 일으키면서 멈추는데, 콘셉트에서는 알림 패널에서 알림을 지우는 액션 전에 알림 설정에 접속할 수 있듯이, 스크롤을 진행하면 상위 페이지로 이동할 수 있다는 생각을 해 봤어요.

그렇지만, 인터넷 브라우저나 메세지 앱과 같이 스크롤이 긴 앱에서 상위 계층으로 이동하고싶을 때 페이지의 중간부분 혹은 아래부분에 있을 경우, 핀치 투 줌 없이 스크롤로만 화면전환 기능을 사용할 때 최상단으로 올라가야지만 기능을 실행할 수 있다는 단점이 있어서, 이 부분은 보완이 필요하다고 생각해요.

제가 놓친 점을 잘 살펴주셔서 다시 생각하고 더욱 발전 된 방향을 모색하는계기가 되었어요.😆 정말 감사합니다! ^ㅇ^
0 좋아요
코드맨
Active Level 10
기타
아이고, 긴 글 등록 하시느라 힘드셨을텐데.
글 정말 대단하네요~
감사합니다.
imAsking
Expert Level 3
기타
다 읽어주셨다니 제가 더 감사합니다 😇
0 좋아요
화화
Expert Level 1
기타
장문의 체계적인 글 잘봤습니다. PDF파일도 다운받아 한번 통독을 했습니다. 다양한 케이스에 대해서 연구를 많이 하신 흔적이 보이네요. UI업계에 몸담고 계신가 보군요 ^^. 삼성전자의 UX 유관파트에서 imAsking님의 문서를 꼭 검토하면 좋갰군요. 분명 더많은 제약과 고려사항이 있기 때문에 실제로 반영은 난관이 많겠지만 아이디어요소들을 시작으로 좀더 좋은 OneUI를 개발하는데 도움이 되었으면 좋겠네요. 문서 작성하시느라 고생 엄청나게 하셨을것 같습니다. 좋고 유익한 컨텐츠 올려주셔서 고맙습니다. 잘 봤습니다^^😀😀😀
imAsking
Expert Level 3
기타
맞아요! 제가 만약에 조금이라도 어떠한 도움이 된다면, 더 좋은 One UI의 다음 버전이 나오개 되고, 앞으로도 삼성 제품을 믿고 사는 소비자들도 좋을것같아요. 😆
아쉽게도 개발은 취미 겸 일과 연관된 부분을 이해하기위해 조금 배운 정도에 UI/UX 업계종사자는 더더욱 아니지만 높이 평가해주시고 시간 내셔서 전부 읽으셨다니 제가 다 감사해요. 💙 💙 😍
0 좋아요
갤럭시S담당
Moderator
Moderator
옵션
기타

안녕하세요. imAsking 님,

 

UX에 대한 깊은 애정과 관심이 느껴집니다.
저희 UX 담당파트에 게시글을 공유하도록 하겠습니다.
정성이 가득 담긴 긴글에 이렇게 짧은 댓글을 남기는게 죄송스럽네요.

 

좋은 하루 되세요 ^^

imAsking
Expert Level 3
기타
답변 남겨주셔서 감사해요!
몸조심하시고 좋은 제품 만들어주셔서 감사해요 💙
0 좋아요