03. SNS 앱 UI 디자인 따라하기

 

---

 

SNS 바이럴 서비스 디자인 UX 분석

실생활에서 많이 쓰이는 SNS(social network service) 앱은 웹상에서 사용자 간 인적 네트워크를 형성할 수 있게 해주는 서비스를 말합니다. SNS는 페이스북, 인스타그램, 트위터, 네이버 블로그처럼 공개형과, 카카오톡, 라인, 텔레그램, 위챗 같은 메신저형으로 구분됩니다. 다수의 참여자가 접속해 사용하는 SNS 앱은 글자의 가독성과 빠른 접근성이 UX 측면에서 가장 중요합니다.

페이스북과 인스타그램은 같은 회사에서 서비스되고 있으며, 필드에 글과 사진을 올려서 사람들과 소통할 수 있습니다. 사용자는 주로 자신의 일상 생활, 취미 등 다양한 콘텐츠를 사람들과 공유하거나 전하고 싶은 메시지를 업로드할 수 있습니다. UI 디자인을 살펴보면 페이스북은 글이 우선되며 여기에 사진, 영상을 첨부하는 형태인데 반해 인스타그램은 사진 기반 SNS 서비스로 연속적 피드백 댓글로 소통할 수 있습니다.

UI 디자인 실습

SNS 기반 인터페이스는 커뮤니티 글과 이미지를 업로드 하고 댓글 및 좋아요로 사용자들끼리 소통하는 화면이 주요 인터페이스로 이루어져 있습니다. 이미지 소스와 텍스트는 [sns_source.xd]와 [sns_text.txt] 파일을 이용하고, 완성 파일은 [sns_app.xd]를 확인해보세요.

01. [iPhone 13, 12 Pro Max] 화면을 불러옵니다. 좌우에 각각 16px과 20px 간격으로 가이드라인을 그립니다. 오른쪽 옵션 패널 [그리드]에 체크하고 [레이아웃]을 선택합니다. [열: 4, 간격 폭: 10, 열 폭: 81, 연결된 왼쪽/오른쪽 여백: 37]로 지정합니다. 예제 파일에서 상단 요소를 가져와 배치하세요.

02. 예제 파일에서 아이콘을 복사해 상단에 배치합니다.

03. 바로 아래에는 사용자 목록을 표현합니다. 상자를 그리고 모서리 값은 [15]로 지정합니다. 이미지를 넣기 때문에 색상은 임의로 지정합니다. 상자 아래에 [텍스트] 도구로 기본 서체 [Segoe UI]를 지정하고 [16pt] 크기로 임의의 이름을 작성합니다.

04. 상자와 이름을 선택한 상태에서 오른쪽 패널에서 [반복 그리드]를 클릭합니다. 그리드 영역을 오른쪽으로 드래그하면 처음 만든 콘텐츠 UI 요소가 그대로 반복적으로 나타납니다.

05. 반복 그리드를 화면 끝까지 만들고, 요소 사이에 마우스 커서를 올린 다음 간격을 적당히 조정합니다.

06. 구글에서 원하는 인물 사진을 검색해서, 사용자 목록 상자 각각에 드래그해서 넣습니다. 또는 작업자의 컴퓨터에서 저장해둔 이미지를 화면에 그대로 드래그하여 가져올 수도 있습니다.

07. 사용자 목록은 가로로 스크롤이 움직이게 만들려고 합니다. 반복 그리드를 지정했던 사용자 목록을 선택하고 오른쪽 패널에서 [가로 스크롤] 버튼을 클릭하면 쉽게 스크롤 애니메이션을 구현할 수 있습니다.