[UI] TIL 2. 그대로 만들기 - Threads
이건 독학일기입니다.
Threads 그대로 만들기
무작정 따라하다보니 목표를 정해두고 작업을 하면 좋겠다는 생각이 들었다. 기능이 꽤나 단순한 Threads앱을 통해 가볍게 기본적인 UI Elements의 구성에 대해 익히는 것을 목표로 두게 되었다.
아래 링크는 기본 요소들을 공부할 때 참고한 자료들이다.
User Interface Elements :
https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html
32 User Interface (UI) Elements Designers Need to Know :
https://careerfoundry.com/en/blog/ui-design/ui-element-glossary/
화면 사이즈를 바꾸고 심볼 다시 만들기
이전에 만든 화면은 아이폰 11 화면 사이즈를 기준으로 만들었었고 (화면 스크린샷이 X기준이기 때문에) 크기를 다시 맞추기 위해 아이폰X를 기준으로 다시 화면을 잡았다. 참고로 아이폰 11 Pro와 X는 제작시 화면 사이즈가 같다.
당연히 심볼도 새로 정의할 수 밖에 없었고, 이 과정에서 checkbox 체크상태와 아닌상태 두가지로 나누어 심볼을 만들었다.
이유는 Replace Symbol 기능을 사용하여 따로 새로 복사 정렬하지 않아도 손쉽게 바꿀 수 있기 때문이다. 핵심 심볼 기능 중 하나인 것 같다.
말풍선 그리기
사실 그전까진 왠만한 복잡한 도형은 일러스트로 그렸다. 스케치로는 기본 도형 말고는 그려본 적이 없다. 그런데 말풍선 꼬리를 그리려니 벡터툴(vector tool)은 자유로운 펜툴과는 거리가 멀었다. 사진처럼 기본 도형들을 자르고 붙이며 만들어야 했는데, 다른 자료들을 찾아봐도 다 비슷한 방법이었다.
(결론은 아직까진 나에겐 불편하다.)
카메라를 은유하는 아이콘
흥미로운 사실은, 이제 stroke가 있는 원형은 카메라의 버튼으로 인식된다는 점이다. 아이폰 초창기의 버튼은 둥근 사각형에 카메라 모양의 아이콘까지 포함되어 있는 아주 친절한 버튼이었지만 이젠 그저 원형의 버튼이면 사람들이 다 '누르면 사진이 찍히겠군'이라고 생각할 수 있다.
왠지 누르면 사진이 찍힐 것만 같은 버튼카메라 화면이 아닌 리스트 화면에 있음에도 불구하고 카메라 버튼이라고 인식할 수 있을 만큼 우리는 앱 세상에 익숙해져 있구나 싶었다.
Overrides와 합리적인 크기 조절
심볼 기능을 영리하게 사용하는 방법을 계속 생각 중이다. 다양한 상태 바들은 텍스트 길이가 다 다르고 좌측에는 이모티콘도 존재한다. 심볼의 원리를 좀 더 공부할 필요는 있어보이나, 여러 시도 끝에 좌측 이모티콘과 텍스트, 그리고 버튼으로 구성한 심볼을 만들어 텍스트 길이만큼 버튼과 텍스트를 함께 우측으로 늘려나갔다.
제법 간격이 맞는 듯 하다.
최종
오늘의 결과물 (좌 : real 우 : 직접만듦)온보딩 과정이기 때문에 Input Control Elements 비중이 많았다. 체크박스나 선택 버튼, 드롭 다운 리스트(드롭 업 리스트라고 해야할까)가 많았고, Navigation Components는 거의 없었다. 사용자들의 화면 이동에 제약을 걸어두어 온보딩과정을 한번에 끝내기 위함이다.
온보딩 시작부터 알림설정 화면까지는 아예 뒤로 갈 수 있는 버튼이나 다른 화면으로 이동 할 수 있는 버튼, 바가 없다. 이는 Threads 뿐 아니라 대다수의 앱의 과정이 이렇게 되어있다. 중간에 이탈하고 앱을 종료하고 다시 켜면 필요한 정보가 채워지지 않았기 때문에 다시 처음부터 시작해야 한다. 화면 이동에 제약을 걸어 빠르게 온보딩을 완료할 수 있는 일종의 넛지인 셈이다.
확실히 그대로 만들어보는 것이 이런 작은 디테일까지 볼 수 있게 하는 듯하다. 분명 내가 놓힌 부분이 있을 수 있겠으나 앞으로 차근차근 또 알아가면 되겠지!
*많은 조언과 오지랖과 피드백과 따끔한 충고 등은 아가 디자이너에게 많은 힘이 됩니다.
다음글
