변화와 차이로 본 SNS

상세페이지

  • HOME > 월별 특집 & 기획

변화와 차이로 본 SNS

SNS는 하루 중 가장 많은 사용률을 보이는 스마트폰 앱이다. SNS 활동은 이젠 우리 생활에 없어서는 안 될 일부분이 됐다. 식사하기 전 사진을 업로드하고, 자신의 기분을 그때그때 나타내는 글을 쓰기도 한다. SNS 사용 증가와 함께 디자인도 계속 변해왔다. 대표적으로 사용되는 SNS인 페이스북, 인스타그램, 트위터를 중심으로 SNS 앱의 변화와 차이를 알아보자.

글. 신건우 기자 gw@websmedia.co.kr


레이아웃과 아이콘
한 손으로 많이 조작하는 스마트폰 특성상, SNS 앱도 한 손으로 하는 스크롤 형태와 콘텐츠 중심의 디자인을 보인다. 무엇보다 SNS 앱은 사용자가 정보에 쉽게 접근하고, 명확하게 파악할 수 있어야 한다. 대표 SNS인 페이스북, 인스타그램, 트위터 모두 같은 종류의 앱이지만, 세 개의 앱을 들여다보면 조금씩 다른 디자인을 볼 수 있다.
초기 페이스북과 트위터는 콘텐츠를 카드형 디자인으로 나타냈다. 콘텐츠 상하좌우에 여백을 두며, 콘텐츠를 돋보이게 했다. 하지만 현재 페이스북의 좌우 여백은 없어지고, 트위터는 얇은 선으로 콘텐츠 사이를 분리한 디자인을 보인다. 반면, 인스타그램은 초기부터 콘텐츠 사이에 선을 따로 두지 않았다. 프로필, 이미지, 아이콘, 댓글 순의 레이아웃을 하나로 구성하며, 각 콘텐츠마다 일정한 구성형태로 보여준다. 선이 없지만 콘텐츠마다 구분되며, 각 콘텐츠 사이가 자연스럽게 이어지도록 했다. 결국, 세개의 앱 모두 최소의 디자인으로 콘텐츠를 구분하고 있다.
또한, 아이콘과 글자 표시 방식에도 차이가 있다. 페이스북은 대부분 아이콘 옆에 글자가 표시돼 있다. SNS 주요 기능인 좋아요, 댓글, 공유 버튼 옆에 글자가 함께 배치돼 있다. 그리고 이 버튼 바로 위에 댓글과 공유 참여수도 나타난다. 이와 달리, 인스타그램은 각 버튼에 대해 아이콘으로만 보여지고 좋아요 개수만 글자와 숫자로 표시된다. 트위터는 답글, 리트윗, 좋아요, 쪽지 버튼이 한 곳에 정렬돼 있으며, 아이콘과 함께 참여수가 표시돼 있다. 다만, 아이콘과 개수 표현에 차이가 없어, 버튼인지 정보 표시인지 구분하기가 어렵다. 종합적으로, 세 앱 모두 가지각색의 특징을 보인다. 그리고 아이콘과 글자 표시에 있어서 사용자의 인식이 중요하게 작용한다. 익숙해진 아이콘은 사용자가 기억하기 때문이다. 이에 따른 변화를 다음 내비게이션바에서 계속 설명하려 한다.

내비게이션바의 변화
페이스북, 인스타그램, 트위터 세 앱에서 가장 큰 변화를 보인 디자인은 바로 내비게이션바이다. 버튼 하나에 모든 메뉴를 넣었던 앱 초기와 달리, 내비게이션바의 등장으로 주요 메뉴를 쉽게 이동할 수 있게 됐다. 모바일 중심이었던 인스타그램과 트위터는 초기부터 내비게이션바를 사용한 메뉴 구성을 해온 반면, 웹에서 시작된 페이스북은 메뉴 버튼 안에 모든 기능을 넣었다. 이후 페이스북도 내비게이션바가 등장하고, 메뉴 버튼이 사라졌다. 특히, 내비게이션바에는 아이콘이 5개가 넘어가면, 충분한 공간이 확보되지 않는다. 사용자들이 주로 사용하는 메뉴를 정해 최대 5개로 구성해야 한다.
세 앱을 비교해보면, 앞서 말했듯이 초기 페이스북 앱은 웹 디자인과 그리 다르지 않았다. 과거 내비게이션바에 있는 친구요청, 알림 등의 기능이 웹과 동일하게 상단 아이콘으로 있었다. 버튼을 눌렀을 때 나타나는 팝업형태도 동일하게 적용됐다. 내비게이션바는 웹의 축소판이었다. 하지만 현재 상단에는 카메라, 검색, 메시지 버튼이 위치해 있고, 내비게이션바는 하단으로 이동했다. 안드로이드의 경우는 아직 상단에 위치해 있다. iOS와 달리, 하단에 소프트키가 있어, 상단에 있는 것으로 보인다. 그리고 내비게이션바에 있던 글자는 현재 사라지고, 아이콘만 표시돼 있다. 또한 오랫동안 뉴스피드, 친구요청, 메시지, 알림, 메뉴 5개 형태로 띄다가, 최근에는 메시지 앱이 상단으로 이동하며 내비게이션바에 변화를 줬다. 아이콘 크기와 표시는 더 미니멀해지고, 주요 기능 4개만 내비게이션바에 남게 됐다.
인스타그램의 경우, 내비게이션바 크기의 변화가 가장 돋보였다. 앱을 켜자마자, 내비게이션바가 많은 영역을 차지하고 있었다. 정중앙에는 가장 중요한 기능인 카메라 버튼을 배치하고, 타원 디자인을 적용해 돋보이게 했다. 그리고 과거 페이스북과 동일하게 아이콘과 함께 글자가 적혀 있었다. 하지만, 그 후 몰라보게 크기는 줄어들고, 내비게이션바의 글자도 사라졌다. 내비게이션바가 배경과 동일한 하얀색으로 변경되며, 내비게이션 영역과 배경을 구분 짓지 않게 됐다. 또한, 정중앙의 카메라 아이콘이 변경됐다. 카메라 버튼은 상단으로 이동하고, 내비게이션바의 정중앙에는 사진 추가를 의미하는 플러스 모양으로 변경됐다. 스마트폰 내 사진을 불러오거나, 기존처럼 카메라 촬영도 가능하다.
트위터는 디자인의 변화가 가장 적었던 앱이다. 하지만 페이스북의 내비게이션바가 5개에서 4개로 줄어든 것과 반대로, 트위터는 4개에서 5개로 늘었다. 페이스북처럼 따로 메뉴 버튼을 추가할 수 없어, 내비게이션바에서 늘린 것으로 보인다. 또, 트위터는 현재까지 내비게이션바에 아이콘과 글자가 함께 표시된 모습을 띤다. 뿐만 아니라 내비게이션바의 아이콘을 눌렀을 때, 아이콘이 작아졌다 커지는 액션 효과를 주고 있다.
SNS 앱은 오랜 시간을 거치면서, 내비게이션바는 점점 심플하고 미니멀해졌다. 내비게이션바 영역과 아이콘도 작아지고, 내비게이션바에 힘을 싣기보다 방해되지 않는 자연스러운 디자인을 연출하고 있다.

사용자와의 인터랙션
다른 앱보다 사용률이 높은 SNS 앱은 점점 내비게이션바에서 글자가 사라지고 간소화되는 추세를 보인다. 사용자가 SNS 앱에 적응하면서, 아이콘과 글자의 형태에서 점점 아이콘으로만 표기하는 방식으로 변화하고 있다. 그만큼 사용자가 앱 아이콘과 버튼 위치에 적응된 듯하다. 사용자가 아이콘만 보고도 기능을 예상할 수 있게 됐다. ‘좋아요’ 아이콘이 전 세계 누구나 아는 아이콘으로 자리 잡은 것처럼 글자보다 하나의 아이콘이 간단하고 명확하게 설명해준다. 또한 플랫 디자인, 최적의 크기, 배경색과 통일된 내비게이션바 등 사용자가 쉽게 인지하는 디자인으로 변하고 있다. 디자인은 점점 미니멀하고 심플해지는 한편, 사용자와의 인터랙션도 중요해졌다. 사용자가 원하는 것이 무엇이고, 필요 없는 요소가 무엇인지 끊임없이 사용자와 소통하며, 최적의 디자인을 찾는 노력이 계속 필요하다.
과거 카드형 페이스북 레이아웃


현재 선으로 구분된 페이스북 레이아웃


과거 카드형 트위터 레이아웃


현재 선으로 구분된 트위터 레이아웃



콘텐츠 사이에 선이 없는 인스타그램


페이스북 내비게이션 변천사


트위터 내비게이션 변천사


인스타그램 내비게이션 변천사

tags 디아이투데이 , ditoday , 디아이 매거진 , DI 매거진 , 신건우 기자 , 앱 디자인 , SNS , 내비게이션바

저작권자 © 웹스미디어 무단 전재-재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다.
본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은
반드시 기사의 출처(로고)를 붙여주시기 바랍니다.
영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라
그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

URL 복사 출력하기 목록보기 스크랩하기

관련기사


정기구독신청