[12/12 부트캠프] 카타, 강의: 노코드 종합반 1주차, TIL

 

내일배움캠프 D-37 (8주차)

 

📌To Do List

* 카타:  IOS vs 안드로이드 ✅ 🤔❌

* 강의: 노코드 종합반 1주차 ✅ 🤔❌

* 개인과제: UT진행 후 문제정의, 솔루션 도출 → 튜터님 피드백 ✅🤔❌

* css실습 ✅🤔❌

* figma특강듣기 ✅🤔❌

 

 

 

01 카타: IOS vs 안드로이드

✏️해상도/사이즈, 서체

전체적으로 안드로이드보다 ios의 개념을 이해하기가 편했고 왜 사람들이 ios라고 하는지 이런 기본기에서 깨달았다..!ㅋㅋ

 

👩‍🏫튜터님 깨알 TIP [해상도]

벡터의 경우 x1, x2 등 괜찮지만 픽셀의 경우 깨질 우려가 있다.
따라서 기본적으로 포토샵에서 3배수로 많이 작업한다!
배수가 높을수록 퀄리티가 좋아짐 / but... 용량 많아져서 서비스 속도에 영향을 미침.

 

 

서체와 해상도 개념이 첨엔 이해하기 어려웠는데 설명을 몇 번 들으니까 이해갔다.

 

 

👩‍🏫튜터님 깨알 TIP [서체]

- 안드로이드 기본단위: sp, dp 
＊dp: 해상도 커져도 사이즈 유지
＊sp: 텍스트에 많이 적용되지만 dp로 작업하는 경우 존재.
- 텍스트 sp 작업 시, 장점: 해상도 커질수록 아이콘같은 요소 등과 같이 폰트도 가독성 좋아보이게 같이 커져야 한다.  폰트 크기 키우기/작게하기 설정 제공하는 서비스있는데 sp로 작업한 서비스는 폰트크기 조절할때 조절한 값에 따라 변한다. sp로 작업하지 않으면 폰트크기가 변하지 않음.
- 그렇다고 다 sp로 작업하는게 좋을까? 폰트 크기 너무 커지면 다른 레이아웃에 영향 미침 + 레이아웃 틀어짐 이슈.
- 프로덕트마다 폰트의 sp적용 여부 고민할 것.

 

 

IOS

- 고딕: Sf폰트

- 명조: Newyork (serif계열)

 

Android

- Roboto: 영어, 숫자 (한글X)

- Noto Sans: 한글, 영어, 숫자, 한자 (폰트가 좀 못났음..)

 

👩‍🏫튜터님 깨알 TIP [서체]

＊ IOS 한글: 애플 산돌 고딕 네오.
- 대부분 모든 언어 지원.

폰트 설정 시, 중요한 것: 우리 서비스에 어떤 언어지원이 필요한가?

보통 한글, 영어만 생각하는데 우리 서비스가 글로벌 계획을 갖고있다면 최대한 많은 언어 표현하는 서체 선정 중요.
보통 기본서체를 많이 사용함. 많은 언어지만 기본서체의 경우 용량이 가볍다!

＊ 안드로이드:
- 로보토(영문,숫자)
- 노토산스(한글, 영문, 숫자, 한자 모두 대응): 많이 사용 하지만 디자인적으로 이쁘진않다. 숫자는 더 그렇다.
숫자는 다른 걸 사용하는 경우 존재. 한글은 노토산스, 영문/숫자는 로보토를 사용하기도함

기본서체는 굵기도 아주 다양.
유료폰트의 경우 각각의 디바이스에 모든 사용자가 그 폰트를 다 다운받아야한다. 그럴 경우 용량차지해서 속도에 영향을 미칠 수 있어서 무료폰트/많은나라 언어 지원하는 기본서체를 많이 사용

＊  서체: 접근성 중요.
- 공공기관 디자인할때 100% 접근성을 가지고 진행. 접근성 위배X. 디자인 망가지는 경우있다.
- 일반 서비스에선 위배돼서 작업되는 경우 많음. 그럼에도 불구하고 사용자 배려를 위해 이런 규칙들을 최대한 지키는게 좋다. 

 

튜터님의 이런 현실적인 조언들이 정말 꿀팁이 되었다... 

말씀하시는 내내 받아적으면서 어떤 게 중요한지 정리할 수 있었다.

이런 것들을 들으면 그냥 넘어가는 내용인 것 처럼 보여도

실제로 작업에 들어갔을 때 이런 정보들이 생각나기도 한다.

따라서 이런 정보들이 있다면 습득하는 게 중요하다!

디자인 카타도 어떻게 보면 아티클을 공부하는 건데

캠프가 끝나도 아티클을 보는 습관을 가져야겠다고 생각했다.

 

 

 

 

 

02 강의: 노코드 종합반 1주차

✏️노코드: 웹플로우

＊ 노코드: 코드 없이 설계하는거.
ex. 웹플로우, 에어테이블, 재피어 등

 

-웹페이지에는 html, css, JavaScript 있음.

html + css + javascript

 

css가 없어진 html만 남은상태. css가 이렇게 중요하다!

 

랜딩페이지나 블로그 만들때도 사용한다고 한다.

노코드 툴에 대해서 정말.. 하나도 몰랐고 무지했는데 이런 툴까지 개발되어있다고 하니 정말 신기했다.

여기서 자바스크립트도 구현이 가능했는데 빨리 자바스크립트도 구현해보고싶다.

 

사실 css실습할 때 hover효과를 적용하려고 해봤지만...

생각보다 속성 정용하기가 쉽지않았다.

이것저것 class name도 바꿔보고 합쳐봤다가 빼봤다가 해봤는데

결국엔 구현하지 못해서 간단한것으로만 구현했다.

 

 

＊ 부모-자식 관계
- 자식이 부모 안에 있음. 자식과 자식이 동등한 위치에 있으면 형제요소라고함.
- 노코드 부모의 스타일 바꾸면 자식요소도 바뀔수있다. 

 

웹플로우에서는 컬러스타일을 컬러스와치라고함.. 컬러스와치~!

버튼뿐만아니라 비율에 따른 이미지도 가이드를 만들 수 있다고한다.

 

비슷하면서 다른 툴들이 헷갈리면서도

이제 코딩과 피그마 개념들을 어느정도 이해하고나서 보니까 그렇게 어렵지만은 않게 느껴졌다.

 

＊Library: 페이지 안의 요소를 복제해서 쓸 수 있는 것. 예를들어 버튼, 인풋 등.. 피그마로 따지면 멀티 컴포넌트라고 생각하면 좋을 것 같다! 일부 요소를 쓸 수 있음

 

 

---

🔥실습

 

라이브러리에서 끌와왔더니 저렇게 똭 배치됨.

 

 

 

현재 작업중인 화면인데 강사님이 시키신대로 따라는 하고있지만..

아니 이럴바엔 차라리 코딩으로 하는게 더 빠르겠다는 생각이 들었다.

코딩이 편하다.... 너무 복잡하잖아!!! ㅋㅋㅋㅋ ㅠㅠㅠㅠ

코딩을 하면서도 머리가 지끈지끈한데 웹플로우를 하면서 더 머리가 지끈거린다 ^^... 

그냥 코딩할래요

 

 

하다가 좌우 패딩값이 달라서 막혀버렸다..

가운데 값들은 패딩 0인데 패딩값이 생겨버렸고

gnb, footer영역은 auto여서 그런지 좌우로 바짝 붙어버림.

어디가 문제인걸까.. 다시 처음부터 시도해봐야겠다.

 

 

 

 

 

어제 늦은밤까지 만들었던 floating gnb형 블로그... 이렇게까지 했는데 또 노코드 실습과제를 해야한다.

이것도 마무리못했는데 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

여기에다가 개인과제 디벨롭도 해야하고..

피그마 특강도 들어야하고.. 너무 정신이 없다.

 

그래도 좌측 float기능을 사용해서 gnb바를 잘 노출시킨 점은 굉장히 작업하는 동안 뿌듯했다.

hover했을 때 변하는 값도 넣어보고 wrap속성 써서 줄바꿈도 해보고

재밌지만 기빨렸던 작업이었다.. 메인페이지도 빨리 제작하고싶은데 일단은 노코드툴을 다뤄야하기에..

잠시 뒤로.

 

 

 

03 개인과제: UT 피드백

✏️디벨롭 실패...

나름 잘 해가지고 갔는데 정보가 명확하지 않다고 하셨다.

내 나름 이쯤 명확했겠지 했는데 계속 부족했나보다.

근데..다시 읽어보니 정말 두루뭉술한 게 많았다.

읽었을 때 최대한 구체적이어야하는구나!를 알았다.

 

정리하는 걸 정말 모르는 왕초보 디자이너다.... ㅠㅠ

 

튜터님께서 처음부터... 개념을 다시 설명해주셨다.

UT를 진행하는 목적, 랜딩페이지가 무엇인지/왜 사용하는지 정말 그 근본을 다시 한 번 짚어주셨다.

 

👩‍🏫튜터님 피드백 핵심

UT를 진행하는 목적을 알기위해선 먼저 랜딩페이지가 무엇인지 알아야한다.

① (과제하는)랜딩페이지의 목적: 신청률 높이는 것.
② 신청률 높이기 위해 어떻게 해야할까? → 랜딩페이지 정보를 사용자에게 잘 전달해야한다.
③ 그 정보가 어떤 정보일까? → 사용자가 필요한 정보
④ 사용자가 필요한 정보를 어떻게 알 수 있을까? → UT를 통해
⑤ 그 정보가 무엇일까? → 개인마다 달라서 테스트를 통해 알아볼 수 있다.

결국, 개선하기 위해서는 사용자의 니즈를 파악하고 불편한 점을 알아야 개선할 수 있다.
사용자가 필요로하는 것을 얻기 위해 UT를 진행하는 것.
정확하게 이해를 못한다고 생각하셔서 튜터님께서 계속 상세하게 기본개념부터 설명을 해주셨다. 항상 내가 문제가 생기는 부분이 이런 기본개념인 것 같다...ㅋㅋ

 

 

1) 테스크 목적

사용자 행동(TASK)으로 무엇을 파악하고싶은지 생각해야 한다.

테스크의 목적이 빠져있던 것.

 

새로 디벨롭한 UT 시나리오였는데, 목적을 삭제해버렸다... 다시 추가하기..+ㅁ+

예를들어,

사용자가 어떤 정보를 중요하게 생각하는지 모르는상태이기 때문에 사용자가 중요하게 생각하는 것을 알기 위해 전체 페이지를 탐색하세요 라는 테스크를 넣은 것이다. 이 정보를 알아야 UT를 그 방향에 맞게 진행하겠지...그렇지.. 왜 지웠을까

 

 

 

2) 꼬리 질문

UT 진행중엔 계속해서 궁금한 것들을 질문해야한다.

예를들어,

있었는데 없다고 느껴지는 경우: "이 정보 여깄는데 이 정보가 잘 안보여졌던 이유가 무엇일까요?"

이런식으로 사용자가 왜 그렇게 생각하는지 계속 물어봐야한다. 
다시 리마인드 하지만 테스트 목적은 사용자가 중요하다고 생각하는 것을 파악하는 것. 파악하기 위한 질문 계속 던지기!

 

 

 

3) 사용자 맞춤 테스크

예를 들어,

사용자가 중요하게 생각하는 정보 = 커리큘럼, 포트폴리오 라고 할 때

테스크 질문지에 있다고해서 테스크 질문을 다 던지기 위해 진행중에 "튜터진한테 가보세요" 이러면 좋은 인사이트 발견 어려움.

사용자에 따라 중요한 정보가 다를수있어서 사용자에 맞는 테스크를 줘야한다.

준비한 테스크를 다 물어보는 것 보단 한 테스크를 딥하게 끌고가야한다.

 

 

👩‍🏫TIP
캠프 신청할 때 가장 영향을 미칠것같은 정보도 테스크로 물어볼 수 있을 듯.

사용자에게 중요한 정보는 [커리큘럼]이 맞는데 가격을 중요하게 생각한다던지 기간이 안맞아서 신청을 못 할 수 있으니까. 그 외의 영향미칠 수 있을만한 정보를 물어볼 수 있음.

 

 

4) 구체적인 접근

다이어그램에서 내용들의 공통점에 대해 구체적일수록 좋다.

ex. 나이가 들수록 늦었다는 생각이 들어요 → 몇살일 때 나이가 들었다고 생각하는지, 뭐가 늦은건지 정보 빠짐

ex. 기초부터 차근차근 공부했으면 좋겠어요 → 그 사용자가 생각하는 기초가 뭔지?

ex. 평범한 회사에서 원하는 디자인을 하고싶어요 → 평범한 회사가 어떤 회사인데? 원하는 디자인은 어떤 디자인인데?

 

5) 문제정의 하는 법

<순서>

① 도출한 인사이트의 우선순위를 매기고

② 여러 사용자가 다 문제라고 하는 것 (많을수록 좋을듯)

③ 이 문제를 해결할 때 임팩트있는 결과값을 나타낼 수 있는지

 

★ 문제 정의를 할 땐 2가지 정보가 들어가 있어야 한다.

1. 목적  2. 문제

 

ex.

- 사용자가 서비스 사용 시, 목적 달성O: 문제X / 목적 달성X: 문제 발생!!

사용자가 목적이 있는데 목적을 달성하지 못했다는 걸 UT를 통해 인사이트로 나타내는 것.

무엇을 달성하려고 했길래 문제라고 생각하는 것일까?

 

그 이후엔

 

 

문제정의 - 가설 - 솔루션 - 검증(A/B테스트 or 사용성테스트)

 

 

6) 다이어그램 내용이 많을 때 정리법

큰 타이틀 안에 또 다른 타이틀을 만들어서 그 그룹에 대한 인사이트 각각 도출하기.

또 그 안에 그룹핑해서 우선순위를 정한다. 우선순위 높은 순으로 도출하는게 좋다.

그 다음에 그렇게 도출한 인사이트를 모아 또다시 우선순위 정하고 문제정의 할 수 있다. 
예를들어 [리뷰]영역에서 사용자가 어떤 정보를 확인하고싶어했는지 인사이트로 도출해주는 게 좋다.

 

리서치 후 인사이트를 그때그때 뽑으면 좋다. 
ex. 리서치하고 해당 리서치 인사이트 뽑고, 그 다음도 리서치하고 해당 리서치 인사이트 뽑고. (반복)

그렇게하면 인사이트 뽑아놓은 것만 보고 비교하면 됨. 인사이트 도출하는 방법 중 하나로 활용하면 좋다.

 

ex. UT: 세 명을 하고나서 세 명 인사이트 모아서 도출하지말고

한 명 한 명 리서치 진행하고나서 인사이트 뽑기. 

 

 

👩‍🏫TIP
UT 테스크 목적 확인하기 → 목적 설정 하기위해 테스트해야 할 서비스 이해하는 것 중요!!
이 맥락을 기억하면 좋다. 

 

 

 

마무리하며...

기존 UT과제도 제대로 못한 느낌인데 코딩까지 계속 하려니

요새는 머리와 몸이 좀 지친느낌이다 ㅠㅠ

코딩 과제할줄 알았는데 코딩을 배운 이후 바로 노코드툴 과제를 또 진행하는게 쉽지 않았다.

그래도 UT과제를 제대로 했다면 이정도는 아니었을 것 같은데

두 개 다 진행하려니 시간이 부족했다.

 

이래서 시간관리를 잘 해야하나보다.

 

Problem 👿	① 시간 안에 개인과제와 코딩 실습과제를 하지 못하였다. ② UT과제할 때, - 다이어그램에서 내용을 구체적으로 적지 못했다. - 인사이트, 문제정의, 가설, 솔루션, 검증 등 모두 못했다. ③ 웹플로우 할 때 좌우 여백값을 설정하지 못했다.
Thinking 🤔	① 시간 안에 왜 하지 못한 걸까? 너무 깊게 들어간 것은 아닐까? 그 문제에 대해 서치해본 적 있을까? 이해해보려고 했던 적이 있나? 다른 친구의 레퍼런스를 참고한 적이 없지않나?  ② UT를 너무 어렵게 생각하는 건 아닐까? 집중이 안되는건가? ③ 웹플로우의 기본 개념을 제대로 이해하지 못한 것은 아닐까? 왜 그렇게 값이 나오는지 충분히 동작하지 않고 바로 실습으로 들어갔던 것은 아닐까?
Solution 🥰	① 최대한 시간 안에 임무 수행하자 → 시간을 쪼개서 최대한 마감을 정해보자 ② 꼭 하고 넘어가야하는 부분이므로, 남는 시간에 꼭 디벨롭 해보자  ③ 다시 처음부터 시도해보고 그래도 모르겠다면 튜터님 방문해보자
Insight ✔️	✔️ 시간 안에 임무를 수행하기 위해 수단과 방법을 가리지 말 것. 시간 관리 잘해야 내가 산다. ✔️ 모르는 내용을 그냥 넘어가면 안된다 ✔️ 몸이 힘들다고 해서 내일로 미루면 안된다........
From now on...🏃‍♀️	주말에 친구들 약속이 있는데, 내일은 정말 할 일에 집중해보려한다!