태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'트랜지션'에 해당되는 글 3건

  1. 2018.12.11 Pull to Refresh UI in 2018 by 문한별
  2. 2018.07.05 과거의 디자인이 지금보다 딱딱하고 투박한 이유 (2) by 문한별
  3. 2014.01.21 User interface의 애니메이션 & 트랜지션 (4) by Sungi Kim
2018.12.11 07:50

Pull to Refresh UI in 2018

이 글은 지금으로부터 5년 전에 작성한 '당겨서 새로고침 UI와 사례' 글의 후속 편이다.

해당 글은 새로고침을 위한 UI가 버튼 탭에서 pull to refresh로 변한 과정과 구성 요소, 25개의 앱 사례를 토대로 UI 패턴을 살펴본 글이다. 최초 피엑스디 블로그에 작성했던 2013년 5월에는 아이폰 4, iOS 6을 사용했던 것 같다. 한창 스큐어모피즘이 먹어주던 시절이다. 지금은 과거에 비해 휴대폰은 훨씬 커졌고 해상도는 높아지고 인터페이스와 디자인 언어 역시 많은 변화가 있었다. 갑자기 궁금해졌다. 마이크로 인터랙션과 모션 피드백이 더욱 정교해진 오늘날, 당겨서 새로고침 UI는 어떻게 변했을까? 5년 전에 살펴보았던 앱을 다시 꺼내 보기로 했다.

과거 Pull to refresh의 UI 패턴은 기본, 변화, 도약 이렇게 세 가지로 분류하였었다. 지금 와서 보니 패턴이란 용어는 적절하지 않아 보인다. 그냥 유형이라고 부르는 것이 맞겠다. 각 유형에 속했던 앱은 다음과 같다.


기본

: Facebook, Twitter, Youtube, Pose, Vyclone

초기 트위티가 공개했던 Pull to refresh에서 크게 벗어나지 않는 기본적인 유형. 텍스트와 화살표, 인디케이터를 제공.


변화

: 쿠팡, Pocket, Readability, Fancy, 카카오스토리, Pinterest, 싸이월드, Intonow, 네이트온, 비트윈, Vimeo, Vine

기본에서 구성 요소 일부분에 변화를 준 유형. 화살표를 삭제하거나 얼럿 창을 추가한 사례 등이 포함됨.


도약

: Dashboard, iOS Mail, Podcast, Gmail, Google+, Tumblr, Path, Twitter music

iOS 6의 메일 앱이나 트위터 뮤직처럼 기본에서 과감히 탈피하고 새로운 요소를 도입한 유형.



2013 vs. 2018 Pull to refresh UI

왼쪽이 2013년이고 오른쪽이 2018년 8월경의 모습이다. 당겨서 새로고칠때 피드백과 UI 요소를 비교해 보겠다. 모바일에서는 네트워크 속도에 따라 이미지가 바로 보이지 않을 수도 있다. gif 파일이니 조금 기다린 후 모션을 꼭 확인해 보길 바란다.


1. Facebook

2013년 페이스북의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 인디케이터만 제공한다.



2. Twitter

2013년 트위터의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 아이콘과 인디케이터를 제공한다.



3. Youtube

2013년 유튜브의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 색상과 모양이 변화하는 인디케이터를 제공한다. (위 이미지를 캡쳐하고 4개월이 지난 현재는 색상 변화 없이 모양만 변한다.)



4. 쿠팡

2013년 쿠팡의 당겨서 새로고침 UI는 무려 오방색 인디케이터를 사용했다! 2018년 지금은 새로고침 방식이 바뀌어 버렸다. 그냥 아래로 flicking 하면 스크롤바가 내려가면서 새로운 리스트를 미리 불러와 화면에 띄운다. 무한 스크롤이다.



5. Pocket

pocket의 당겨서 새로고침 UI는.... 지금도 똑같다. 5년 동안 한결같은 것이다. 이런 친구가 주변에 한 명쯤은 있어야 한다.



6. Fancy

2013년 Fancy의 당겨서 새로고침 UI는 텍스트 정보만 제공되었다. 2018년 지금은 화면 최상단 중앙에서 인디케이터만 제공한다.



7. 카카오스토리

2013년 카카오스토리의 당겨서 새로고침 UI는 인디케이터와 텍스트 정보가 제공되었다. 2018년 지금은 인디케이터만 제공한다.



8. Pinterest

2013년 핀터레스트의 당겨서 새로고침 UI는 인디케이터와 텍스트 정보가 제공되었다. 2018년 지금은 단추 같이 생긴 인디케이터만 제공한다.



9. 싸이월드

2013년 싸이월드의 당겨서 새로고침 UI는 인디케이터, 아이콘, 텍스트 정보와 화면 중앙에서 별도의 얼럿이 제공되었다. 2018년 지금은 인디케이터만 제공한다.



10. 네이트온

2013년 네이트온의 당겨서 새로고침 UI는 인디케이터, 아이콘, 텍스트 정보와 화면 중앙에서 별도의 얼럿이 제공되었다. 2018년 지금은 얼럿을 노출하지 않는 점을 제외하고 동일하다.



11. 비트윈

2013년 비트윈의 당겨서 새로고침 UI는... 참 아기자기했다. 2018년 지금은 인디케이터만 제공하는데 개발을 어떻게 한 건지 빨리 사라지지 못하고 리스트 위에 미련을 남긴다.



12. Vimeo

2013년 비메오의 당겨서 새로고침 UI는 지금 보아도 깔끔하다. 아이콘과 인디케이터가 제공되었다. 2018년 지금은 인디케이터만 제공한다.



13. iOS Mail

2013년 iOS 6 메일의 당겨서 새로고침 UI는 아이콘과 인디케이터뿐만 아니라 당겨서 떼는 제스처에 의해 늘어나는 찰떡 오브젝트가 제공되었다. 2018년 iOS 12인 지금은 인디케이터만 제공한다.



14. Podcast

iOS Podcast의 당겨서 새로고침 UI는 iOS 메일과 동일한 변화가 있었다.



15. Gmail

2013년 G메일의 당겨서 새로고침 UI는 아이콘과 색상이 변화하는 오브젝트가 제공되었다. 2018년 지금은 모양이 변화하는 인디케이터를 제공한다. 유튜브와 동일하다.



16. Google+

2013년 구글 플러스의 당겨서 새로고침 UI는 색상이 변화하는 오브젝트, 텍스트 정보가 제공되었다. 2018년 지금은 색상과 모양이 변화하는 인디케이터를 제공한다. 유튜브와 동일하다.



17. Tumblr

2013년 텀블러의 당겨서 새로고침 UI는 iOS 6 메일에서 보았던 찰떡과 모션이 있는 오브젝트가 제공되었다. 2018년 지금은 인디케이터만 제공한다.



18. Path

Path의 당겨서 새로고침 UI는... 여전하다. (이제 안녕)



'Pull to Refresh' UI의 현재

지금까지 총 18개의 앱을 실행하여 2013년과 2018년의 당겨서 새로고침 UI를 비교해 보았다. 2013년에는 총 25개의 앱을 보았는데 5년 사이에 아래 7개의 서비스가 망해 버렸다. ㅜㅜ

Pose, Vyclone, Readability, Intonow, Vine, Dashboard, Twitter music

문 닫은 서비스는 그렇다 치고 당겨서 새로고침 UI에는 대부분 공통적인 변화가 있었다. 바로 간소화이다.


과거 당겨서 새로고침 UI의 기본 요소였던 화살표 아이콘과 텍스트는 제스처 방향과 상태 정보를 표시했다. 컬러풀하고 화려한 애니메이션의 적용이 많았다. 2018년에 와서는 대부분 생략되고 스피너만이 아주 잠깐 빙글 돌다가 사라질 뿐이다. 왜 그럴까?


모두가 알고 있다

스크린 위에서 두 손가락 사이를 벌리면 사진을 확대할 수 있다. 스마트폰 사용자 중에 이것을 모르는 사람은 이제 없다. 이와 마찬가지로 Drag & drop, 당겼다가 떼면 새로 고칠 수 있다는 것 역시 모르는 사람이 없다. 더 이상 구분동작 설명과 학습이 필요하지 않다.


시간이 없다

네트워크 발전으로 데이터를 다운로드하는 시간 역시 크게 줄어들었다. 큰 이미지와 영상도 과거보다 더 빨리 화면에 나타난다. 리프레시하는 찰나의 순간이 콘텐츠를 불러오기에 충분한 시간이 되었지만, 완료되는 시간이 감소한 만큼 새로고침에서의 복잡한 정보와 요소를 모두 전달하기 어려워졌다.


방해된다

작은 모바일 화면에서도 이미 우리의 눈은 봐야 할 것들로 가득하다. 플레이 버튼을 누르지 않아도 자동으로 동영상이 재생된다. 이런 와중에 당겨서 새로고칠 때마다 현란한 움직임과 TMI를 봐야 한다는 것은 매우 피곤한 일이다. 구태여 존재감을 드러내지 않아도 된다. 이제는 감추는 요소가 된 것이다. 제스처에 즉각 반응하되 최소한의 피드백만 제공함으로써 사용자 시선을 분산시키지 않고 콘텐츠의 몰입을 깨지 말아야 한다. 그러나 이러한 흐름을 무시하는 분야가 있다. 바로 이커머스이다.



E-commerce의 Pull to Refresh UI

위 세 개 업체의 당겨서 새로고침은 브랜드 로고, 상품 카테고리, 원형 아이콘을 이용한 그나마 단순한 방식이다. 옥션, Amazon, LF mall, Airbnb, trivago 등등의 앱도 확인해 보았는데 일반적인 스피너 또는 쿠팡과 같은 무한 스크롤링 방식을 제공했다.


위 세 개 업체의 당겨서 새로고침은 두세 번씩 당겨도 모션 이미지를 제대로 보기가 쉽지 않았다. 앞서 언급했던 것처럼 충분한 시간이 없기 때문이다. 스크린 녹화하려고 천천히 당겼기 때문에 이 정도이지 일반적인 제스처라면 저 문구와 이미지를 제대로 볼 수 없다. 정보 전달에는 효과적이지 않다. 애초에 무엇을 위한 것인지 조차 분명하지 않다. 사용자는 이것을 보려고 온 것도 아니고 봐줄 여유도 없다.



마치며

당겨서 새로고침이 어떻게 달라졌는지 비교해 봄으로써 구성 요소와 그래픽이 과거에 비해 많이 간소화되었음을 확인할 수 있었다. 본 글에 담지는 않았지만 Flipboard, BuzzFeed, HuffPost, Medium 등과 같은 콘텐츠 앱들도 일반적인 스피너만 제공했다. 반면, 이커머스 분야에서는 아직도 화려한 피드백을 일부 제공했으며, 짧은 시간 동안 파악할 수 있는 정보의 수준과 목적성의 중요함을 알 수 있었다. 앞으로는 더욱 소비되는 콘텐츠의 성격과 이용 환경에 맞춰 인터페이스의 우선순위가 달라질 것 같다.


Yelp의 당겨서 새로고침은 우주로


5년 뒤엔 또 어떤 모습일까? 그때는 몇 개의 서비스가 살아 있으려나.


*이 글은 브런치에서도 볼 수 있습니다 - @uxstar

연관글 : Pull to Refresh(당겨서 새로고침) UI와 사례


[참고##UI 디테일##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2018.07.05 07:50

과거의 디자인이 지금보다 딱딱하고 투박한 이유

어느 날, 저희 블로그 구독자분이 다음과 같은 방명록을 남겨 주셨습니다.

모자이크 브라우저(마크 안드리슨)를 보면서 생각이 들었습니다. '왜, 이런 486 시대에나 볼 수 있는 브라우저 디자인이 먼저 탄생했어야 했는가?

최근, 구글이나 기타 웹사이트 들을 보면 둥글둥글하고 매끄럽고 아기자기한 디자인이 사용된다는 느낌을 받습니다(개인적인생각). 앞서 말씀드린 모자이크 브라우저 같은것을 보면 뭔가 무뚝뚝하고 딱딱하고 투박한 느낌을 먼저 받습니다. 여기서, 왜 이런 순서로 디자인이 변해온것인지 궁금해집니다. 오히려 오늘날의 디자인이 옛것이고 시간이 지나면서 모자이크 브라우저같은 스타일이 오늘날로 업그레이드 될 수는 없었는지 괜한 생각이 들었습니다...ㅠ

물론, 이런 생각조차 이미 과거의 영향을 받았기 때문이라 생각이 듭니다.

왜 디자인은 과거의 것이 더 투박하고 더 딱딱하게 느껴질 수 밖에 없는것일까요; 아니면 이건 저만 느끼는 저만의 착각인걸까요...ㅠ? (디자인에 편견을 갖지 않는 안목을 가지고 싶습니다.)


To. 위 질문을 남겨 주신 '노트테이커' 님께

안녕하세요. 저희 피엑스디는 독자분이 남겨주신 방명록과 댓글에 최대한 답변을 드리려 노력하고 있습니다.

지난 6월, 이 질문을 보았을 때는 곧바로 답변을 드릴 수가 없었습니다. 과거의 투박해 보이는 디자인이 오늘날 둥글둥글하고 매끄러운 모습으로 변한 이유와 그러한 순서로 변한 이유에 대해서 딱 한 마디로 정리하기가 쉽지 않았기 때문입니다.

질문해 주신 포인트를 다시 곱씹어 보았습니다. '자연스러운 현상이 아닌가?' 또는, '일반화하기 어려운 주장이다.'와 같은 편견을 버리고 '왜 그런 느낌을 받게 되는가?'라는 점에서 다시 출발하여 다음과 같이 두 가지 주제로 정리해 보았습니다.

왜, 과거의 웹 디자인은 더 투박하고 딱딱해 보일까?

왜, 시간이 지나 둥글둥글하고 매끄러운 디자인으로 변해온 것일까?


마크 안드리슨의 모자이크 브라우저를 언급하셨기에 디스플레이를 매개로 삼는 웹/그래픽 디자인으로 범위를 좁혔습니다. 과거의 디자인은 투박하고 요즘은 매끄럽다는 점은 영역과 관점에 따라 전혀 다르게 주장할 수도 있겠지만, 질문자가 지적한 포인트 역시 충분히 공감됩니다. 그래서일까요? 이 질문에 대해 저희 피엑스디의 많은 분이 의견을 주었습니다. 그중에 몇 가지를 원문 그대로 소개해 드립니다.



1. 기술적 표현의 한계 때문이다

제 머릿속에 떠오르는 건 '기술적 표현의 한계' 때문인데요.


1. 디스플레이 해상도

90년대~2000년대 초반까지만해도 많이 사용되던 모니터 해상도가 800x600 ~ 1024x768 였는데 (...) 해상도가 낮으니 당연히 섬세한 표현이 어려웠던 것 같아요.


2. 드로잉툴의 불완전성

과거에 픽셀 찍어가며 이미지를 만들었던 건 픽셀작업이 재밌고 멋져서가 아니라 우선 툴이 그렇게 생겼기 때문인데요. 지금이야 포토샵에서 붓으로 찍은 점 가장자리 픽셀들이 투명+조정된 색상으로 표현돼 부드럽게 보이는 게 당연해보이지만 아래 포토샵 초기 인터페이스를 보면......


3. 과거 디스플레이들에서 출력 가능한 색상 / 웹 안전색상(216개)의 한계

웹에서의 이미지 표현이 안전색상(216개)에서 벗어난 건 생각보다 오래되지 않았는데, 이 안전색상이 별 의미가 없었다...는 기사도 본 기억이 나지만 어쨌든 2000년대 초반까지만해도 웹에서 사용할 수 있는 컬러는 대단히 제한적이라고 알려져있었고 지금은 당연하게 여겨지는 부드러운 곡선/곡면 표현이나 그라데이션 또한 색이 "모자라니까" 제대로 그려내기 어려웠을 거고요.


*사족으로...

웹브라우저 인터페이스와 웹페이지 디자인은 구분되어야할 것 같고요.

웹브라우저 윈도우에서는 상단 메뉴키나 하단 프로그레스, 경로, 파일명, 파일크기 등 정보 표시 영역이 필수적으로 존재하는데 콘텐츠(웹페이지)가 보여지는 영역을 최대치로 사용해야하는 한계가 있어 표현이 간소화되는 건 필연이라고 봅니다. 위의 표현적 한계와 제한된 인터페이스 영역, 과거 "버튼"이라고 인지되는 요소의 표준 형태 등을 고려했을 때 모자이크 브라우저는 당시로서는 표현의 최대치였을 것 같아요.



2. 시간을 그런 방식으로 경험했기 때문이다

참 어려운 질문이네요…

어떤 디자인은 시간이 지남에 따라 옛 것으로 느껴지기도 하고, 어떤 디자인은 오랜 시간이 지나도 여전히 현대적인 느낌이 드는데, 일부는 기술의 발전에 따른 것도 있지만, 대부분의 경우는 우리가 시간을 그런 방식으로 경험했기 때문일 것 같아요.

디자인 역사를 전공하신 교수님께 질문해 보시는 것이 좋을 것 같아요.



3. 더 좋아 보이는 것으로 대체된 것이다

과거의 디자인에서 표현 및 형태를 규정지었던 방식이 이후 시간이 흐르면서 더 좋아보이는 방식 혹은 다수가 받아들이는 새로운 방식으로 대체 되었을 때 ‘유행이 지났다’거나 ‘촌스럽다’고 느끼는 것 같아요. 그런데 어떤 디자인은 시간이 흘러서 일부가 바뀌었어도 여전히 그 표현 방식의 핵심이 유지되고 있는 것들이 있는데요, 우리는 이를 두고 ‘여전히 현대적이다’ 라고 느끼게 되는 것 같습니다. 시대가 지나도 유효한 표현방식을 취하고 있으니 이를 높이 평가하는 것이죠. (이런면에선 ‘모던디자인’은 여전히 ‘모던’ 한 것 같습니다)

이런 관점에서 보면 이 질문은 다분히 미학적인 질문이라고 생각되는데요, 미학과 교수님이나 진중권 선생에게 트윗을 해보면 어떨까 싶네요.



4. 클라이언트 퍼포먼스, CSS 때문이다

정답은 없고 주관적인 견해만 있을 질문이네요! 늦었지만 저도 답변 드립니다.

기술적 표현의 한계라는 큰 꼭지는 저도 같습니다. 웹 디자인은 클라이언트측 퍼포먼스와 밀접한 관계가 있는데 시간의 흐름에 맞춰 자연스럽게 디바이스 퍼포먼스는 좋아지고 전보다 높은 연산을 필요로 하는 표현법을 '공식적으로' 지원하기 시작하면 디자이너나 개발자는 새로운 기술을 비로소 적용하기 시작하는거죠.

Border radius는 옛날부터 어떤 방식으로든 구현 해 왔지만, 공식적으로 css3에서 지원하기 시작한건 그리 오래 되지 않았어요. 비슷한 예로 컬러모듈이나 미디어쿼리가 있죠. behance 2018 디자인 트렌드의 그라데이션도, 같은 이유에요.


CSS standard 를 보면, 트렌드라고 부르는 그 시점과 동일한것을 알 수 있어요. 또 웹과 앱 디자인은 트렌드를 공유하며 서로 영향을 받는 관계기 때문에 한쪽에서의 새로운 기술은 굉장히 쉽게 적용되고, 금새 트렌드가 되어진다고 생각해요. 회사에서도 한번 비슷한 주제로 얘기를 길게 한적이 있었는데 (누구였죠? 등판하세요!), 결국에 웹 디자인 트렌드는 CSS3에 큰 영향을 받는다고 생각해요.



5. 스큐어모피즘에서 플랫 디자인으로의 변화다

먼저 질문을 저희 식(?)으로 재해석 해보면...

과거: 투박하고 딱딱 -> 현재: 둥글둥글 매끄러운 디자인

=> 스큐어모피즘 -> 플랫 디자인으로의 변화로 바꿀 수 있을 것 같습니다.


하지만 스큐어모피즘이 투박하고 딱딱해 보인다(=촌스럽다)는 건 편향적이고 잘못된 시각입니다. 단지 요즘 트렌드가 아닐 뿐이죠.

과거에는 왜 스큐어모피즘으로 디자인 되었는가? 라는 더 나은 질문으로 바꿔서 생각해봅시다. 이에 대해서는 크게 두 가지 이유가 있다고 봅니다.


1. 어포던스

스큐어모피즘은 플랫디자인보다 현실 세계의 메타포를 적극적으로 표현하기 때문에 사용자에게 있어 러닝커브를 매우 크게 줄여줍니다.




과거엔 컴퓨터 보급률도 낮았고 디지털 기기의 경험치도 낮았습니다. 때문에 사용자가 현실세계에서 겪었던 개념을 그대로 반영하는 것이 사용성을 높일 수 있는 방안이었습니다. 시각적으로도 더 친숙하게 느낄 수 있기 때문에 진입장벽도 낮출 수 있는 유용한 방법이었을 테고요.

즉, 플랫 디자인보다는 어포던스가 높은 스큐어모피즘이 디자인적으로 더 효과적이었고 그래서 널리 사용되었습니다. 하지만 세살배기도 아이패드를 잡고 유튜브로 뽀로로를 보는 디지털 세대가 주류가 되면서, 이런 어포던스를 제공하는 것에 목맬 필요가 적어졌습니다. 많은 디지털 기기들을 접하면서 대충 어느 것은 버튼이고 어떤 것은 리스트고, 어떤 건 메뉴라는 것들이 이미 디지털 세대들에게는 체화되었기 때문이죠. 거기에 20여년 간 디지털 인터페이스들이 패턴화 된 것도 한 몫 하고 있고요. 그래서 플랫디자인이 사용될 수 있는 여건이 마련되었습니다.


2. 기술적인 한계

플랫 디자인은 위에서 말한 대로 어포던스가 비교적 떨어집니다. 하지만 기술의 발전이 이를 보완해줍니다. 바로 모션(트랜지션)의 등장입니다.


플랫 디자인은 모든 것을 형태와 색 정도로만 표현하기에 정적인 상태로만 표현되면 시각적으로 이해하기 어렵습니다. 하지만 어떻게 등장해서 사라지는지, 손을 댔을 때 어떻게 움직이는지 실제 물체처럼 표현한다면 (=매터리얼 디자인) 동작에 대한 예상(어포던스)을 더 쉽게 할 수 있게 됩니다.

과거에는 컴퓨팅 사양이 낮았기 때문에 모션을 제대로 표현하기가 어려웠습니다. 잘 표현하려면 많은 메모리, 뛰어난 그래픽 연산장치가 필요한데 예전 기술로는 정적인 이미지를 잘 표현하는 것도 힘들었거든요. 지금은 일반적인 웹브라우저에서도 실제와 가까운 모션을 자유롭게 표현할 수 있을 정도로 기술이 발달했고요.

결국 이렇게 모션을 통해 어포던스의 부족함을 채울 수 있게 되면서 플랫 디자인이 큰 문제없이 받아들여지게 됩니다. 재미있는 건, 모션이 얼마나 실제적이냐가 관건이 되면서 스큐어모피즘이 대체된 것이 아니라 오히려 모션 속에서 살아있다는 점입니다. 다시말해 시각적 스큐어모피즘에서 모션의 스큐어모피즘화라고 할 수 있겠습니다.


왜 플랫 디자인으로 바뀌는 걸까?

그냥 스큐어모피즘에 모션만 끼얹는 정도로 발전할 수도 있는 것 아닐까요?

이에 대한 답은 명확하지는 않습니다만, 미술 역사와 비교해 보면 약간의 힌트를 얻을 수 있습니다. 과거 미술도 회화중심의 그림이 위주였지만, 산업혁명 때 사진기가 대중화 되면서 현실을 사진보다 더 똑같이 표현하는 게 힘들어지자 추상적 표현 중심으로 바뀌었죠.

마찬가지로 디지털 세대가 주류가 되면서 더 이상 현실세계의 메타포를 사용하지 않아도 되게 되었고, 스큐어모피즘도 추상적인 표현인 플랫 디자인으로 바뀌어 가는 것이 아닌가 생각합니다.

그리고 스큐어모피즘은 제한된 디스플레이 크기에서는 현실 메타포를 표현하기 위해서 쓸데없이 많은 픽셀들을 소모한다는 단점이 있는데요. 이는 모바일 기기와 같이 작은 디스플레이에서는 매우 치명적인 단점이 됩니다. 때문에 모바일 퍼스트 시기와 맞물리면서 더 픽셀을 적게 소비하는 플랫 디자인으로의 변화는 필연적인 것 같기도 합니다.



마치며

지금까지 소개해 드린 총 다섯 분의 의견은 기술과 시대가 변하면서 그럴 수밖에 없었던 개연성을 말하고 있습니다. 이 글을 읽고 계신 여러분의 생각은 어떠하신가요? 또, 하나의 질문에서 이렇게 다양한 접근과 의견이 나오는 것을 보면서, UX 디자이너에게 '왜?'라는 질문의 중요성을 다시금 생각해 볼 수 있었습니다. 당연하게 쓰이고 있는 디자인 규칙과 인터페이스. 현재 이러한 모습을 보이게 된 기원은 무엇이었는지, 그 과정에 어떠한 일들이 있었는지를 곰곰이 생각해 본다면 근미래의 모습도 예상해 볼 수 있지 않을까요?


*이 글은 브런치에서도 볼 수 있습니다. @uxstar


<함께보면 좋은 글>

두 디자인 대륙의 충돌 - 메타포냐 메트로냐?

스큐어모피즘이란?

스큐어모피즘: 만져지는 UI로의 변화 과정

스팀펑크란?

[독후감] 사물의 이력




팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2014.01.21 02:43

User interface의 애니메이션 & 트랜지션

최근 모바일 앱이나 모바일 웹, 웹사이트에서는 화면 요소의 애니메이션이나 트랜지션 효과(*이하 UI 애니메이션)들이 많아지고 있습니다.

메뉴를 불러오는 것에서부터 시작해서, 페이지를 전환할 때, 혹은 토글버튼 같은 디테일한 부분에도 효과들이 들어가죠. pxd story에서 소개한 적이 있는 pull-down refresh는 그 대표적인 사례라고 할 수 있습니다. 이를 통해 UI 애니메이션은 시각적인 즐거움을 넘어서 기능을 올바르게 표현해줄 수 있는 수단이라는 것을 생각해볼 수 있습니다. 그리고 이런 UI 애니메이션들도 패턴화 되어가고 있습니다.



UI 애니메이션, 요즘 유행하는 트렌드
요즘 Dribbble에서는 이런 UI 애니메이션을 보여주는 GIF Animation이 유행인 것 같습니다. 이제 '스큐어모피즘'을 지나 '플랫 디자인'과 'GIF Animation'으로 드리블을 하고 있나봅니다. 저는 이런 작업들을 보는걸 좋아하는데요, Dribbble에 올라오는 작업들은 눈이 즐겁고, 영감을 듬뿍 줍니다. 스큐어모피즘이 유행했을 때도 그랬고, 플랫 디자인이나 UI 애니메이션들을 마음 껏 볼 수 있는 요즘도 그렇고요.

좌 : http://dribbble.com/shots/1078102-Sidebar-animation 우 : http://dribbble.com/shots/1343162-Gif-Timeline-App
좌 : http://dribbble.com/shots/1239862-iPad-Mini-Showcase-Template 우 : http://dribbble.com/shots/969876-Switch-gif
이런 디지털 손목시계 UI 컨셉 디자인들도 있습니다.
좌 : http://dribbble.com/shots/1280333-iWatch-Mock-Up 우 : http://dribbble.com/shots/1323294-Sange-watch-02-GIF


UI 애니메이션이 중요해진 이유
사실 Windows나 OSX를 사용할 때는 UI 애니메이션이 별로 중요하게 느껴지지 않았습니다. 그건 아마도 WIMP기반의 화면은 여러 창이 충분히 복잡하고, 여러 계층구조가 한 창에 표시되기 때문에 움직이는 효과를 최소화 하지 않았을까 합니다. 트랜지션이 일어날 일도 별로 없고요. 아, 그래픽 처리 능력의 변화도 있겠군요.

대신 스마트폰이나 타블렛에서는 상황이 많이 달라졌습니다. 스마트폰에서는 창 대신 하나의 앱이 화면 전체를 사용하고, 가상 포인터 대신 실제 손가락을 화면에 터치하는 방식으로 사용합니다.

하나의 앱이 화면 전체를 사용하지만, 그나마도 작은 크기의 화면이기 때문에 많은 정보들이 숨겨져 있게 되었습니다. 그래서 필요할 때만 표시해줘야 하는데, 단순히 화면이 변경되는 것을 넘어 트랜지션 효과를 통해 실제 화면 밖에 숨겨진, 가상의 영역을 인식시켜 줄 필요도 생겼습니다. 이런 효과가 페이지의 맥락과 계층을 쉽게 인지하고 학습 할 수 있도록 만들어 줄 테니까요. 그리고 손가락을 터치하는 것은 WIMP의 가상 포인터와 달리 실제의 환경에 가깝습니다. 이런 경우 손가락으로 행동하는 것에 맞춰 인터페이스의 인터랙션도 실제에 가깝게 반응해야 더 친숙하게 느껴질겁니다. 물론! 과하지 않아야 하겠죠.

이런 흐름에 맞춰, 모바일 앱은 물론이고 데스크탑 OS에서도 UI 요소와 화면 전환 간에 화려함이나 동적인 화면 요소가 많아지고 있습니다. 웹도 마찬가지이죠.


웹에서의 UI 애니메이션
웹에서는 이런 UI 애니메이션들이 점점 다양하게 접목되고 있습니다. 플랫 디자인도 한 몫 하고 있지만, 그것과 같은 파도의 흐름을 타고 있는 HTML5, CSS, 자바스크립트를 통해 개발자는 손쉽게 UI 애니메이션을 구현하는 소스와 결과물을 만들어 낼 수 있게 되었습니다. 디자이너는 공개된 소스를 수정하여 손쉽게 디자인을 구현해 볼 수 있는 도구와 창구를 얻게 되었죠. 혹은 서로 반대의 경우도 가능하겠습니다.

그래픽 디자인에 Dribbble이 있다면, 프로그래밍에는 GitHub가, 그리고 그 중간 격인 CODEPEN, CSSDeck등의 웹사이트 들도 있습니다. 그리고 요즘에는 여러 웹 UI 컴포넌트들의 애니메이션 효과나 페이지 트랜지션의 패턴 사이트들도 생겨서 훨씬 더 쉽게 참고를 하거나 응용할 수 있게 되었습니다. 웹은 이전에도 그랬지만 인터랙션 디자이너가 코딩과 디자인을 넘나들며 흥미롭게 일할 수 있는 훨씬 좋은 터가 마련되었습니다 :)

CODEPEN 과 같은 사이트에서는 소스 편집을 통해 바로 수정된 결과를 적용해볼 수 있습니다

UI 패턴 라이브러리처럼 트랜지션/애니메이션 패턴의 예제를 보여주는 사이트들도 많이 있습니다.

*참고 사이트
http://tympanus.net/Development/PageTransitions/
http://h5bp.github.io/Effeckt.css/
http://daneden.github.io/animate.css/
http://tympanus.net/Tutorials/CaptionHoverEffects/index.html


고민이 필요한 점
하지만 여기서부터는 고민이 되는 부분입니다. pxd 내에서도 문제인식이 있었는데, 현재 프로젝트의 UI 설계 문서는 화면 페이지 단위로 Workflow를 작성하기 때문에 이런 UI 애니메이션을 적절하게 문서화 할 수 있는 수단이 별로 없습니다. 최근 보편적으로 쓰이는 몇 가지만 글자로 표현 될 뿐이죠. 그리고 이런 UI 애니메이션은 누가 중심 역할을 해야 할까요? UI/UX 디자이너 일까요? 그래픽 디자이너일까요? 아니면 개발자일까요. 이런 문제는 프로젝트에서 역할이 점점 세분화 되고, 부서가 나뉘고 분야에 따라 회사가 나뉘며 점점 벌어지고 있는 부분인 것 같습니다. 이전에 프로젝트를 할 때 디자인 컨셉에서 페이지간 전환이 중요한 역할을 한 적이 있었는데요, 그 때에는 웹으로 간략히 프로토타이핑을 하여, 페이지 트랜지션을 어떻게 할까 의사결정을 했었습니다. wipe를 할지, slide를 할지 부터 시작하여 duration이나 ease는 어느 정도로 할지 등을 중요하게 논의한 적도 있었습니다.

이제 이런 UI 애니메이션은 앱이나 웹을 구현할 때 배제할 수 없는 중요한 부분이 되었습니다. 그리고 프로젝트에서 이런 부분을 어떻게 처리할지 역할에 대한 고민이 필요할 것 같습니다. 이런 내용을 문서화 할 수 있는 방식이나, UI 애니메이션에 대한 패턴화도 적극적으로 진행되어야 하지 않을까요?
아니면 혹시, 잘 정리되어있는 사이트를 알고 계신다면 알려주세요 :)

아래, 이제 활성화되기 시작하는 UI애니메이션 패턴 라이브러리 사이트들을 몇 개 적습니다. 계속 업데이트 할 예정입니다.
http://capptivate.co
http://useyourinterface.com
http://ui-animations.tumblr.com
http://sixux.com
--- 일반 스크린샷 패턴 라이브러리 ---
http://www.mobile-patterns.com/
http://inspired-ui.com/
http://pttrns.com/

[참고##패턴##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 4
Ad Test...