[내일배움캠프] 끊임없이 이어지는 삽질_자괴감과 땅바닥 머리박기의 반복

 

 

시간이 왜 이렇게 빨리 지나가나요

구라탐지기 돌리면 싹 쓸려나갈듯 

 

 

0. 오늘의 노래

 

 

1. 오늘 학습 키워드

 

	오전 학습 목표 (~14시)	오후 학습 목표 (~19시)	저녁 학습 목표 (~21시)
손민정	✅ 디자인 카타 진행 ⬛ 강의 4주차까지 재수강&과제 제출	⬛ 컴포넌트 제작: 아이콘(30종) 외 ✅ 단순 모바일 UI 주제/페이지 구상	✅ TIL ⬛ 미달성 목표 달성

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

~10:27

디자인 카타 진행

주제 두 가지를 선정했으나 시간 관계상 하나만 진행.

 두 가지 시안이 실무에서 사용되는 모습을 찾아봤다.

A안: 카카오톡, 인스타그램, ZARA, 핀터레스트, 갤럭시 하단바

B안: 네이버, 당근, 유튜브, 밀리의 서재, 무신사, 카카오톡(업데이트 전 ver.) 등등...

 A안을 선택한 이유가 무엇일까도 고민했다. 인스타그램과 카카오톡 어플 사용자의 낮은 연령대로 인한 익숙한 사용성, ZARA의 깔끔하고 모던한 무드 지향? 가운데 심볼로고를 박아넣은 것으로 비롯해 브랜드 아이덴티티를 강화하기 위함으로 추측했다. 추가적으로, 토의 중 인스타그램의 단독디자인(A안) 네비게이션 바를 확인하는 중 팀원 중 한 명의 말에서 번뜩 떠오른 생각이 있었다.

"가운데 있는 게 게시글 업로드 버튼이었네요."

깨달은 건 두 가지였다.

• 평소 해당 어플에 익숙치 않다면 버튼을 보고 연동 페이지를 유추하기 힘들다.
• 가운데 위치한 버튼은 그 어플리케이션의 핵심 기능, 즉 어플에서 제일 권장하고 싶은 기능일까?

 인스타그램의 경우 사용자의 컨텐츠 업로드가 곧 어플의 메인 화면으로 연결된다. 친구의 것이든, 인기 있는 것이든 게시물을 골라내 띄울 수 있으니까. 카카오톡 업데이트의 경우 새로 추가된 쇼츠 폼이 중간에 위치해 있다. 오픈채팅과 함께인데, (아마도 네비게이션 구조 등의 문제도 있었겠지만)버튼을 새로 추가하지 않고 먼저 볼 수 있도록 갱신했다. 새로운 페이지(기능)의 추가만을 놓고 보자면, 카카오톡이 메인으로 밀고 싶었던 요소가 무엇인지도 생각해 볼 만 하다.

 대부분의 어플, 웹 사이트, 서비스들은 항상 새로운 사용자를 찾는다. 상기 예시로 사용된 커머스 앱 또한 마찬가지로, 오랫동안 어플을 사용한 이는 물론 새로이 접속한 사용자 또한 막힘없이 어플을 사용할 수 있는 것. 그것이 사용자 수를 늘리고 결제로 이끄는 첫 번째 관문이라고 생각한다.

 때문에 대부분의 모바일 앱은 B 안과 같은 방식을 사용한다. 각 앱만의 독자적인 페이지를 텍스트로 명료하게 설명하면서도 직관성을 높이는 방식. 그 누구라도 쉽게 앱을 사용할 수 있도록 하는 방식이다.

 실제 앱에서 사용되는 아이콘들의 디자인은 대부분이 비슷하다. 비록 생김새나 연결 페이지는 다를지언정, 통용되는 사이즈와 구성 양식 같은 것들이 존재한다. 24*24 픽셀로 작업한 아이콘과 그 아래 삽입되는 12px 안팎의 텍스트들. 대부분의 네비게이션 바를 구성하는 요소다. 이와 같은 구성은 앱에서 사용하는 독자적인 서비스를 설명하는 데도 도움이 된다. 밀리의 서재의 투데이, 유튜브의 쇼츠, 당근의 동네생활 같은 것들이 그 예시다.

 

~14:00

 이후 강의를 재수강했다. 5주차까지 전부 수강한 뒤 과제를 제출하는 게 첫 목표였는데, 4주차의 강의 분량을 보고 빠르게 수정했다. 이것도 달성하지는 못해서 꽤 우울했지만.

 아래는 메모한 것 목록. 아는 것, 모르는 것, 가물한 것 가리지 않고 전부 적었다.

• 디자인 시 1(포인트_프라이머리 컬러): 3(세컨더리 컬러_들러리) : 6(백그라운드 컬러_흰색 기본)
• Body-xsmall: 12 < Body(이후 생략)-small: 14 < medium: 16 < large: 18 < xlarge: 20
• 폰트 사이즈는 10px 미만은 읽기 힘들어 사용하지 않는 것 권장. 20px 이상 폰트일 때는 4px 씩 차이나게 하는 게 일반적. 일반적으로 20px 미만 폰트들은 본문, 이상부터는 제목에 사용. 16px이 시작점인 이유: 웹사이트 기본 시작점이 16px이었기 때문.
• 행간 값은 사바사지만 사용자의 편의성은 답이 될 수 있다.

• 메인 컴포넌트-인스턴스 성질 잘 알아두기: 인스턴스(자식 개체) 컬러 등 수정 시 덮어쓰기 됨, 메인 인스턴스 수정해도 효과 없을 수 있음
• UI 디자인 시 코딩에 방해가 되지 않도록 디자인 시스템을 제대로 만들어야 함. UI의 규격과 스펙, 사용 사례, 주의사항 등이 총망라된 종합적인 제품 가이드라인.
• UI  분류

• 액션( Action): 사용자가 중요한 행동을 수행할 때 사용
• 인풋(Input): 사용자의 입력을 받을 때 사용
• 인포메이션(Information): 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
• 컨테이너(Container): 컴포넌트 여러 개가 결합되어 하나의 덩어리를 이루는 컴포넌트
• 내비게이션(Navigation): 사용자가 페이지를 이동할 때 사용
• 컨트롤(Control): 사용자가 설정이나 값을 수정할 때 사용
• 각 항목은 동일한 컴포넌트에서 사용될 수도, 더 세분화될 수도 있음. 각 분류의 이름을 정확히 아는 게 중요한 게 아님. 어떤 역할을 하는지 알아야 함.

• 라벨/레이블(Label): UI가 사용자에게 ‘이렇게 하세요’를 안내하는 글자는 라벨이라고 불러요.
• 리딩 엘리먼트(Leading Element):  버튼 라벨보다 더 앞쪽에 있다는 뜻
• 트레일링 엘리먼트(Trailing Element): 버튼 라벨보다 더 뒤쪽에 있다는 뜻
• 우리나라/서양 은 왼쪽서 오른쪽으로 읽음. LTR(Left to Right) 문화권, 아랍권은 반대. RTL 문화권임
• 스플릿/텍스트 버튼은 중요도가 낮은 선택지/텍스트 입력을 도움

 

~17:00

 이후 강의 수강과 컴포넌트 제작을 병행.

 사실 딴짓을 좀 하기도 했다...집중력이 약해서. 때문에 아이콘 제작은 느릿느릿 거북이처럼 진행됐다. 강의 수강을 병행하기도 했어서 아이콘 10개를 겨우 완성. 그래도 강의는 꽤 수강했었다. 켜 놓고 딴짓만 한 건 아니고, 돌려보거나 실습도 진행하면서.

 

~20:00

 슬슬 TIL을 써야겠다고 생각했는데 아뿔싸.

 이 때서야 4-8을 다 들었다. 후다닥 과제만 마무리해서 제출하면 될 거라는 생각으로 과제 페이지를 열었는데...

그렇구나..나는 헛배웠구나.....

 

 ㅏ...........

 내 능력의 한계를 여기서 체감했다. 실무 경험이 있다고 해도 되나 이걸? 숙제 하나 하는 게 너무 어려운데??

 어찌저찌 제공된 자료들과 힌트 페이지를 참고해 제작하긴 했다. 근데 어휘가 너무 입에 안 붙는 것 같더라..배리언츠, 텍스트필드, 프로퍼티. 분명 다 봤는데 왜 이렇게 초면 같은지. 구글 폼으로 제출했던 학습 속도 기재를 다시 해야 하는 건 아닐까 하는 생각이 지금에서야 문득 스쳐지나가기도 한다..

이미 지난 건 어쩔 수 없지만.

 여차저차해서 제작 중이다. 다만 시간이 너무 늦어지는 것 같아, 우선 내일 마저 진행할까 생각 중. 내일 5주차는 다 들을 수 있을까....반복만이 살길이긴 하겠지.

어쩔 수 있나.

죽이 되든 밥이 되든 해 보는 수밖에.

 

~10:48?

참고할 법한 페이지를 몇 가지 찾았다. 이하 리스트업.

- https://figma-play.tistory.com/9

피그마 핵심2) 컴포넌트 프로퍼티 Boolean(불리언), Instance swap(인스턴스 스와이프), Text(텍스트) 추

- https://joonyou.tistory.com/74#google_vignette

Figma nested instances 네스티드 인스턴스 10분만에 원리 이해하기! 네스티드 인스턴스가 무슨 옵션인

- https://teamsparta.notion.site/3-8-UI-1-2232dc3ef51481349183e47234356ca8#2232dc3ef51481cbb1eacb7c7a98cd02

챕터3-8 : UI 만들기 실습(1) | Notion

 

3. 학습하며 겪었던 문제점 & 에러

 용어에 익숙해지는 데 시간이 꽤 걸릴 것 같다. 이전 전공 공부 때도 그 때문에 애를 먹었던(것 같은) 기억이 이제서야 스멀스멀 올라오기도 하고, 요즘 스트레스 관리가 좀 안 되는 것 때문인지 집중력도 바닥이고.

 그리고 무엇보다 강의를 완전히 숙지하지 못한 게 큰 것 같다. UI 구성이나 컴포넌트, 베리언츠, 프로퍼티 등 조금만 헷갈리거나 미숙지한 요소가 나오면 한참을 헤메고 시간을 낭비하는 게 크다.

여기서 이걸 뭐..어떻게...??

 오늘은 시간이 늦어 미처 가지 못했지만, 내일은 튜터님께 찾아가 도움을 구할 예정이다. 하루 한 번씩은 여쭤보는 게 제일이었을 것 같아 아쉽기도 하다. 내일 질문 리스트업이나 해 가야겠지..마음의 힐링을 찾아 털복숭이 강아지 조카나 만지러 가야겠다.

 

4. 내일 학습 할 것은 무엇인지

	오늘 달성한 목표	오늘 달성 못한 목표 & 이유	내일 목표
손민정	- 디자인 카타(~10:27) - 강의 3-7까지 진행	- 강의 4주차 완강&과제 제출: 과제 제출 지연 - 컴포넌트 제작(5%): UI 구성 미숙지, 강의 수강 시간 지연	- 컴포넌트 제작(40%) - 강의 5주차 완강&과제 제출