[UI] TIL 1. 그대로 만들기 - Threads
이건 독학일기입니다.
*시작하기 앞서
시작은 미약하나 그 끝은 창대하리라..!
UI 공부를 처음부터 (혼자) 시작해보기로 했다.
* 오늘 만들어 볼 것은! 메신저 앱 Threads 이다.
오늘 만들어 볼 것 : Threadsinstagram에서 만든 DM용 앱이다. Message 기능이 주기능이고 스냅챗(snapchat)처럼 사진을 찍어 바로 친구에게 전송할 수 있다. 빠르게 찍고 쉽게 공유하는 Z세대를 위한 앱이 아닐까 싶은데, instagram의 DM을 Threads에서 연동해 쓰는거라 DM대신 종종 사용한다. 다양한 스킨을 지원하기도 하고 애초에 DM이 오면 Threads에서 푸시 알림이 오고 바로 앱으로 연결된다.
기존 사용자를 그대로 끌고 와서 서비스에 연동하는 만큼, 온보딩 과정도 아주 쉽게 되어있다. 첫화면 부터 '너 00이니?' 라고 바로 알아봐주니 난 '응' 만 하면 되고, 아니라면 계정을 바꾸면 된다.
*시작하기에 앞서,
모바일 디자인 패턴을 정리해준 엄청난 사이트가 있다. Mobbin이다. 항상 최신의 상태를 유지하는 지는 모르겠지만, 스크린샷을 위해 앱을 깔고 하나씩 들어가보고, 스크린샷을 찍는 엄청난 과정을 스킵할 수 있게 대신 노가다(?)를 해준 고마운 사이트다. (다시한번 모빈 사랑해?)
Mobbin (Threads page) : https://mobbin.design/apps/threads
이곳에서 스크린 샷을 가져와 스케치 앱으로 옮겨 왔다.
옆에 사진을 깔아두고 같은 크기의 캔버스(iphone 11)로 작업했다.
*중요한 포인트 : 모빈의 스크린샷은 iPhone X를 기준으로 제공된다... 난 그것도 모르고 신이나서 iphone 11으로 작업을 했다. 약간씩 UI 요소들이 작아져서 나타나는 이유가 여기에 있었구나!
iPhone X : 1125*2436(pixels) - 375*812(points) (x3)
iPhone 11 : 828*1792(pixels) - 414*896(points) (x2)
결과물 미리보기 (좌 : real 우: 직접 만듦)
Threads의 앱아이콘 디자인 (좌 : real 우: 직접 만듦)오늘의 목표는 크게 2가지 이다.
1. Threads의 화면 구성을 단순히 따라해 보는 것. ( 물론, 구성 요소들 간의 간격, 여백, 글자 크기를 체크해가며 해야 진짜 공부가 된다)
2. Fill영역의 Gradient와 image 사용을 마음껏 해보는 것.
*레이아웃 잡고 그라디언트 연습하기
먼저 마진값을 체크해보았다. Ruler를 사용하여 양쪽 영역을 체크했다. 기준은 아래 button을 기준으로 잡았다.
체크는 개인적으로는 이렇게 Rectangle로 체크하는게 편하다. Threads는 22의 마진값을 두었다. 중앙정렬이기 때문에 따로 그리드를 설정하진 않고 마진 영역과 중앙만 표시해두었다. (약간의 계산기가 필요하다)
이미지 위에 위치 그대로 텍스트를 얹고 글자 크기, 굵기를 체크했다.
대망의 앱 아이콘! 먼저 Radius 값을 체크했다. 대고 위에 그리면 쉽게 그릴 수 있다.
글자 자간은 일단은 맞추진 않았다. 먼저 완성하는게 우선이어서 잠시 미뤘다.
이제 gradient 값을 주기 시작했다. 스포이드로 뽑아서 사용했다.
중간 컬러를 Fill로 채우고 각 귀퉁이에 그라디언트 값을 주었다. 생각보다 그럴싸해졌다.
그위에 카메라 렌즈를 얹으니 금세 완성되었다.
아주 미세한 그림자 값을 주고 끝냈다.
*미세한 시각보정
타이틀 'How Threads works' 은 자세히보면 중앙정렬이 아니다. 만들면서 알게되었는데 약간 오른쪽으로 치우쳐있다. 아무래도 하단 왼쪽의 넘버링과 좌측 정렬된 텍스트들 때문인 것 같은데, 이런 세심한 시각보정은 만들어 보기 전까지 모른다.
*심볼과 이미지 갈아끼우기
마지막 장은 symbol을 이용한다.사진과 텍스트의 간격을 체크하고 하나의 샘플을 만든 뒤 symbol로 묶어주었다.
위치에 맞게 복사를 해주었다. 간격이 28.5라는 이상한 숫자가 나와서 29로 해버렸다.
symbol에서 사진을 바꾸는 것은 unsplash만 지원이 됬다. Random Photo, Search Photo 둘 다 랜덤해서 주사위 계속 던지듯 꽤 여러번 반복했다.
완성!확실히 심볼 기능은 스케치의 핵심 같았다. 정말 편하고 시간도 많이 줄여준다. 예전에 처음 웹디자인을 할때 포토샵으로 만든 적 있는데.. 레이어의 지옥과 느린 속도의 지옥을 경험했다.
*최종!
이렇게 4장을 완성하게 되었다. 걸린 시간은 대략 1시간 이었던 것 같다. 앱 아이콘 그라디언트에서 디테일을 잡는답시고 시간을 허비했던 것과, Apple ios UI 가져왔을 때 작아져서 꽤나 당황하며 일일이 크기를 키웠던 것이 원인이었다. 오랜만에 스케치를 켰으니까.. 라며 위안 삼아본다! (이제 시작이니까)
사실 글을 적고 업로드를 위해 캡처하고 이미지를 정렬하는 시간이 실제로 스케치 작업 시간보다 훨씬 길었다. 첫 글이기도 해서 나름 신경쓴다고 올려 보았지만 조금 효율적으로 정리할 필요도 있는 것 같다. Threads는 UI 스킬적인 것 뿐 아니라 사용자 경험 측면에서도 공부를 해볼 필요가 있다. 또 개선해 볼 여지가 있다면 개선해보는 것도 좋을 듯하다.
*많은 조언과 오지랖과 피드백과 따끔한 충고 등은 아가 디자이너에게 많은 힘이 됩니다.
다음글
