[12/19 부트캠프] 카타, 과제: 웹플로우 랜딩페이지 제작③, 피그마 특강

 

내일배움캠프 D-42 (9주차)

 

📌To Do List

* 카타: zoom, dropbox 발표 듣고 질문 ✅

* 과제: 웹플로우 랜딩페이지 제작③  ✅ (과제제출 완료)

* 피그마 특강듣고 정리 ✅

 

다음주부터 UX집중반이 하루에 2시간씩 진행된다.

누구보다 UX가 부족하다는 것을 알고있었고 튜터님께서도 이를 검토하시고 UX집중에 넣어주신 것 같다!

유튜브, 쏘카, 현대카드 이렇게 임의로 서비스를 배정받고 팀원끼리 논의하고 문제를 정의한다.

제대로 잘 못했던 지난 프로젝트를 생각해보면서 내가 어느 부분에서 자꾸 이해를 못하는지 스스로 인지해야겠다.

 

 

 

01 카타: Zoom, Dropbox

✏️Zoom

 

zoom이 3억 5천만명, MS Teams가 7500만명....

어느 서비스가 화상 서비스에서 가장 우세한지 알 수 있었는데 zoom이 그정도였나 싶을 정도로 거의 대다수의 사람들이 쓰는 것을 보고 놀랐다.

이전에 zoom말고는 다른 걸 써본 경험도 없고 처음에 zoom으로 접했으니 계속 그것만 쓸 것 같다는 생각이다.

처음에 그 시장을 선점하는 게 어려웠을텐데 코로나 시기 비대면이 우선시돼다보니 자연스럽게 zoom을 통해 모든 업무가 이루어지게 만들었다.

코로나 비대면이 풀린 이후에도 여전히 비대면 면접이나 웨비나(web+semina)등이 여전히 진행하고 있다는 점이 큰 매리트였다.

앞으로 회의가 아닌 비대면 방식의 무언가로서의 행보가 기대되었다.

이미 IT시장에서 AI가 계속 떠오르고있고, zoom도 이에 맞춰 가고있는데 어떤 AI기능이 출시될지에 대해 궁금했다.

zoom 뿐만 아니라 다른 서비스도 마찬가지!

 

이런 다양한 기능을 제공한다고 한다.

내가 모르는 화이트보드 기능,

채팅만 되는줄알았는데 파일공유도 가능했다.

 

zoom은 웹 뿐만 아니라 모바일, 데스크톱에서도 모두 지원되기 때문에 참여할 수 있다는 것!

다른 화상회의보다 zoom이 성공할 수 있었던 이유는 사용법이 단순하고 확장성이 좋기 때문이라고 추측한다....

 

 

 

 

 

✏️Dropbox

 

내가 사용해본 서비스는 구글 드라이브였는데, 사실 USB에다 다 옮겨놓기 때문에

클라우드 기반 드라이브가 낯설게 느껴졌다.

 

그냥 사진 저장 및 공유, 정리 등을 자동화하는 시스템이란 것은 알지만

어떤식으로 돌아가는지 정확하게는 알지 못했다.

Dropbox도 클라우드 기반 saas서비스!

 

삭제된 파일도 복구할 수 있고, 모바일 기기와 자동 연동이 돼서 저장된 파일,이미지,영상을

자동으로 동기화하고 백업해준다. 아이클라우드와 비슷한 것 같다.

 

이 기능을 다른 협업도구 예를들어 내가 조사했던 slack이라던지 그런도구와 협업할 수 있게

연동도 할 수 있고 다양한 면에서, 업무적인 면에서도 도움이 될 것 같다.

 

 

다른 앱이 아닌 드롭박스를 쓰는 사람들은

기술적으로 우위해있고, 사용자의 경험이 뛰어나다는 것.

협업 기능도 잘 돼있고 통합서비스도 좋다고한다.

 

이전에 프로젝트 진행했을 때 기업분석을 했는데

이런식의 핵심가치는 찾아보지 않았던 것 같다.

다른 팀원이 찾아오긴한 것 같은데 내가 직접 찾이 않는 이상 뭔가 머리에 뚜렷하게 박히지 않은느낌이라 잊힌 것일수도 있다.

 

Dropbox는 생산성, 협업, 보안 이렇게 중요하다고 생각한다.

내가 조사했던 slack도 생산성을 되게 중요시하는데 saas의 특징인 것 같다.

생산성을 향상시키기 위해 어떤 기능을 넣으면 좋을지 고민해봐야할 것 같다.

 

 

 

02 과제: 웹플로우 랜딩페이지 제작 (올라) 마무리

✏️에어테이블

튜터님께서 오늘 아침에 공지를 올리신다고 하셨는데

결국 심화과제는 그렇게 진행하지 못하게 됐다.

너무 아쉬워서 눈물 콸콸~~~ (사실 좋을지도?)

그냥 일단 남아있는 문제를 해결하기 위해 튜터님 방 앞으로 갔는데

이미 기다리시는 분이 계셔서 그분과 대화를 나누었다.

 

그 분도 마찬가지로 에어테이블을 하고싶었는데 하지 못하셔서

너무 아쉬워하셨다. 저도요...ㅠㅠ

그래서 일단은 남아있는 과제, 최대한 할 수 있는 과제까지는 진행한 후 제출을 완료했다.

 

생각보다 빠른 시간안에 제출을 마무리했고, 내가 코딩을 그래도 괜찮게 하고있는 것 같아서 좋았다.

 

아 그리고 어제 이해하지 못했던 z값을 오늘 이해하게되었다.

relation 포지션으로 변경할 때 z값을 설정하는 게 있는데

보통 값보다 앞으로 나오게 할때 양수, 뒤로 가게할땐 음수를 넣으면 된다.

이 때 z의 양수값을 100으로 설정했더니 내가 생각한 요소가 가장 앞단에 나오게 되었다.

 

여기서 질문!

🤔 그냥 1,2.3 이렇게 넣으면 안되나요? 했더니

보통 z값은 큰 단위로 쓰고 100,500,1000 이렇게 넣는다고 하셨다.

이유는 다른 요소에서 1,2.3의 값보다 앞서나갈 수 없다고 하셨던 것 같은데

여기서부터는 개발자의 영역이라고 생각해서 그냥 큰 단위로 넣자! 까지만 이해했다.

 

 

 

 

03 피그마 특강

✏️피그마 꿀팁

심화과제 대신 이전에 듣지 못했던 특강을 다시 듣기로 했다.

 

 

유튜브 뮤직같은 경우,

유튜브의 UI, 그리고 os의 기준에 맞게 잘 만들었다고한다.

구글소속인 유튜브는 구글머터리얼 디자인 가이드에서 사용하는 아이콘을 사용했다.

 

 

1) 클론디자인

컴포넌트의 구조, UI 일관성이 어떻게 돼있는지 파악하기 위한 단계 수립

 

① 서비스 선정, 분석
- 화면 캡쳐 (홈화면, 검색화면, 좋아요 화면 등)
- 분석한 화면의 사용자 플로우 그리기

② Foundation 세팅 (텍스트, 아이콘, 컬러)
- 컬러팔레트 정의하기
각 브랜드마다 asset이 존재한다. 찾아보기!

③ UI구조 분석
- 반복되는 영역 찾기 (큰 영역 먼저 찾고 점점점 작게 세부요소별로 나눠보고 얼마나 반복되는지 분석해야한다)

④ 클론 디자인 시작 

⑤ 반복 요소의 UI 설계방식 고민하기
- 그냥 복붙해서 쓸 것인지, 컴포넌트로 만들지 고민하기
이 부분도 고민이 필요한가? 싶었다. 반복요소니까 당연히 컴포넌트화 해야하지 않나...?

⑥ 컴포넌트 구조짜기
- 이거는 큰 단위부터X, 가장 작은 단위부터 만들기 
구조를 분석할 때에는 큰단위부터 작은 단위로, 만들때는 작은단위부터 만들라고 하셨다.
작은 단위에서 중복되고 겹치는 부분이 많이 존재하기 때문에 이 부분부터 확실하게 만들어야 큰 단위도 척척 만들 수 있다.

⑦ 내가 만든 컴포넌트 인사이트 적기
- 만든게 얼마나 유용한지 돌아보는 시간!
ex) 반복이 많이 되지 않아서 컴포넌트로 만들지 않아도 됐겠다!
- 웹 - 개발자도구에서의 컴포넌트와 내가 찾은 컴포넌트 비교하기

 

무조건 이렇게 해야하는 건 아니고 자기한테 맞춰서 어떻게 해야 더 효율적일지 정하면된다.

 

 

2) 중복 = 컬러로 표시

 

중복되는 요소는 이런식으로 컬러로 표시해볼 수 있었다.

이렇게 보니까 중복되는 게 바로 보이는데 상단 칩 버튼과 하단 탭바,

그리고 초록색 상단 네비게이션 부분은 다른 화면에서 반복되는 부분이 많으므로 상단 네비바도 중복이 많은 요소라는 것을 알 수 있었다.

 

요소 이름은 이런식으로 정하면 되는데, 이런 부분들이 어느 영역에 얼마나 많이 중복되는지 확인할 수 있었다.

 

다시한번 말하지만 분석할때는 큰 단위에서 작은단위로 쪼개서 분석하기!

예를 들어 전체화면 보고,

그 다음 우리 웹플로우 했을 때 처럼 gnb section, hero section, contents1 section, contents2 section ... 이런식으로 section을 분리해서 저렇게 컬러로 표시하기

 

색상 기준을 잡을땐 이미지, 텍스트, 버튼 이런식으로 크게크게 나눠볼 수 있다.

 

내가 나눠본 영역은 이렇다 색깔조합 홀리 sh...

 

 

 

3) 컬러는 다양하게

 

기본적으로 유튜브에서 제공하는 컬러는 이렇게 총 3가지지만

이외에도 다양한 그레이스케일 컬러를 사용하고있다.

그레이스케일 뿐만 아니라 레드도 마찬가지! 그 컬러와 관계가 있는 컬러를 베리에이션 해서 쓴다고 보면 된다.

 

이 예시 같은 경우는 뒤에 있는 완전 블랙컬러보다 살짝 덜 블랙(?)임.

이렇게 지정한 컬러 이외에도 한 컬러를 다양하게 베리에이션해서 쓸 수 있다!

(엇.. 근데 이렇게 햇을 때 컬러 시스템에 추가를 안해도 괜찮을지 궁금증이 생겼다. 나중에 물어봐야지...!!)

 

 

컬러 스타일 화이트/블랙을 그냥 ffffff,000000로 지정해서 사용하는 경우가 있었는데

이것 마저도 스타일로 지정해놓으면 좋다고 한다. 이 부분에서 굉장히 뜨끔하긴했는데

이런것도 정해야 규칙이 생기는 것을 알게 되었다.

이런 부분이 제일 사소한 부분인데 이런 부분을 잘 해야 더 프로페셔널한 디자이너가 될 수 있을 것 같다.

 

 

 

4) 치명적인 실수, 폰트 네임 정하기

 

이전에 잘했다고 생각한 폰트스타일을 캡쳐해봤다.

여기서! 잘못된 게 있다. 정확하게는 잘못됐다기 보다는 이렇게 하는 것을 추천하지 않는다!

어떤 게 잘못됐을까? 

 

바로 텍스트 스타일 정할 때 명확하게 사이즈를 적어놓은 것.

"타이틀입니다 28px"이라고 적어놨는데, 추후에 속성값(텍스트 사이즈)을 26px로 변경하면

저것도 26px로 변경해야하는 문제점이 생긴다.

따라서 사이즈 지정할 땐 S,M,L 혹은 1,2,3 이런식으로 정해놓는게 좋다고 하셨다.

 

UI를 아주 잘 하고있다고 생각했는데 전.혀 아니었다ㅋㅋㅋㅋㅋㅋ

이렇게 또 내 실력에 충격을 받고....

다음부터 이렇게 안하면 된다!ㅎㅋㅋㅋ

 

 

 

 

5) 아이콘 이름 설정하기

Material Design icons라는 플러그인!

 

머터리얼 디자인에 만든 거라서 생각보다 꽤 정교하고 깔끔하게 만들어진 것을 볼 수 있었다.

 

아이콘 컴포넌트 명을 지정할 때 주의사항이 있다.

같은 모양이지만 다른 이름으로 지어진 경우들이 너무 많으면 나중에 헷갈리고 보기가 어려워진다고 한다.

예를 들어 X모양의 아이콘의 이름을 지을 때

어떤 건 delete,  어떤 건 close 이런식으로 지어질 수 있다. 이런 아이콘과 이름들이 다양하다면..?

머리가 아플거다..ㅎ

 

그래서 튜터님은 '메타포'를 기준으로 이름을 지으면 된다고 하셨는데

머터리얼 디자인에서는 그 기준대로 이름을 잘 지었다고 하셨다.

여기서 메타포라는 개념이 좀 익숙하지 않아서 그 뜻을 찾아봤다.

 

💡메타포(Metaphor)란?

- 사전적 정의: 은유, 비유, 상징
- A=B다

 

 

🤔그렇다면 튜터님께서 말씀하셨던 X아이콘은 뭐라고 명칭해야하나?

그냥 X라고 해야하는지 궁금해서 머터리얼 플러그인에 검색해보았다.

"delete" 라고 검색하니까 이렇게 just 쓰레기통만 나옴.

 

그 아래에 관련된 아이콘들이 나왔는데 X버튼은 "close"라는 명칭을 쓰고있었다.

보다 직관적이고 메타포를 기준으로 한 아이콘이 어떤 의미인지 알 수 있었다.

 

 

 

이런식으로 네이밍이 쓰이고 있음을 확인할 수 있었다.

arrow도 내 생각에는 공유 버튼이 아닌가하는 생각들어서 sharing 이라고 생각했는데

arrow outward다. 정말 A=B인가보다. 보여지는 대로 명칭을 붙이는 것!

 

 

 

 

6) 아이콘 제작 TIP

① constraint에 scale x scale이 잘 먹여졌는지 → 인스턴스 사이즈 변경 시 잘 늘어남
② 선으로 만든 아이콘은 우측 클릭 - outline stroke 로 깨줬는지/flatten 기능을 썼는지 → 동일한 비율로 아이콘 확대/축소 가능 

 

flatten의 기능과 outline stroke의 기능이 조금은 헷갈려서 따로 찾아봤다.

 

참고한 블로그: https://wdnote.tistory.com/194

- flatten: 압축하기. 평평하게 하기. 여러개의 요소를 하나의 레이어로 만들어준다고 한다. 이때 선은 여전히 선의 형태로 남아있다.

관련된 내용은 블로그를 참고하면 이해가 더 빠를 것이다!

- outline stroke: 선을 면으로 처리.

③ 아이콘 제작 시 가이드라인 참고하기 (구글 머터리얼 가이드) → 비율이 이상하지 않게 시각보정 효과

 

 

 

 

7) Auto layout 과 Constraints

지금은 알지만 전에는 꽤나 헷갈려서 튜터님께 따로 개인실습?ㅋㅋㅋ을 받았던 부분이다.

복습차원에서 다시 해봤다

이게 오토레이아웃

frame에 적용되는 건 constraints

 

constraints의 경우 position패널에서 볼 수 있고 간혹 이게

 

이렇게 꺼져있어서 안보일 때가 있었다. 그럴땐 다시 우측 아이콘 버튼 눌러서 활성화시켜주면 된다.

반응형 디자인할 때 꼭꼭 필수로 하는 것이니 constraints공부가 필요한 사람은 꼭 하는 것을 추천한다.

 

 

 

 

8) Variant 와 Property

어떤 건 variant로 컴포넌트를 만들고

어떤 건 property로 만들고.

 

전에 만들었던 디자인 키트인데 이런식으로 만들어지게 돼서

아니 booliean으로 껏다 켜야하는건지, 아니면 property속성을 넣어서 계속 변경값을 추가해야하는건지

이해가 되지 않았다.

 

하지만 이에 대해 특강을 진행해주신 점이 마음에 들었다. 전에 특강을 들었으면 더 좋았을텐데!

왜냐면 좀 까먹었다. ㅠㅠ

variant나.. property나 비슷비슷해보인다. 휴 ㅠㅠ 다시 복습해봤다.

 

＊Variant
사용법: 전체!!!! 통째로 컴포넌트를 바꿔야한다!!! 할 때 사용
컴포넌트 만들 때 요소들 추가해서 변경하는 방식.

이런식으로 하나의 컴포넌트 안에 여러개의 variant를 만들어서 우측패널에서 선택할 수 있는 방식.


＊Property
사용법: 개별적인 요소 수정 시 사용 (텍스트, 불리언, 인스턴스 스왑)
하나의 컴포넌트에 property값을 넣는 방식. 하나의 컴포넌트를 잡고 Add property를 누르면 네 개의 항목이 나온다.
강의에서는 Variant와 Property(Text, Boolean, Instance swap)를 구분하라고 했다.
피그마에서는 Property를 variant까지 포함시켰지만 이를 두 개로 분리하라고 했던 기억이 났다.

variant를 제외하고 나머지 text, boolean, instance swap으로 property를 통해 컴포넌트를 수정할 수 있다.

예를 들어 이 알림 아이콘을 boolean값으로 껐다 켰다 할수있게 만들기위해 먼저 boolean property를 추가했다.

그리고 알림 아이콘을 선택하면

appearance에 이런 창이 뜨게되는데 저 아이콘을 누르면 이렇게 설정한 불리언 프로퍼티를 적용시킬 수 있다.
적용된 값은 복제한 인스턴스에서 확인할 수 있다.

켰을때

껐을때

한 개의 컴포넌트에서 property의 값을 조정해서 만들 수 있다.

 

컴포넌트 만들때 이런 게 너무 헷갈렸었는데 이거는 어떤 게 더 효율적인 방식인지를 따져야한다고 하셨다.

variant를 여러개 만들어서 사용하는 게 효율적인지, 

아니면 한 개만 만들고 property값만 바꾸는게 효율적인지!

 

 

 

9) 컴포넌트 이름 만들기

level + UI type + direction + size 이런식으로 정하면 된다.

 

① level

- 1레벨: item - 최소 단위, UI에서 혼자 쓸 수 없는 단위

- 2레벨: Basic - 작은 단위

- 3레벨: Complex - 조합된 단위

- 4레벨: Module ???

- 5레벨: Section ???

처음에 level이 뭔가 했는데 이런 것에 따라서도 나뉠 수 있다는 것을 처음 알았다.

조금은 헷갈리는 점은 어떤게 item인지 어떤게 basic인지 구분되지 않았다.

이거는 팀 내에서 정한 규칙이긴 한데 거의 저런식으로 많이 사용된다고 한다.

 

왼쪽은 모듈 / 오른쪽은 섹션 (웹플로우 했을때를 생각해보자!)

 

② UI type: 체크박스인지, 라디오버튼인지, 네비바인지 등!
③ direction: 방향이 어떤 방향인지? 가로인지 세로인지! 이것도 우리가 배웠던 row, colmn을 적어도 되고 horizontal, vertical 이렇게 적어도된다.
④ size: S,M,L 혹은 1,2,3 이런식

 

*토큰: 스타일 만들기 위해 짓는 이름과 값의 한 덩어리.

 

 

10) Nested Instances

위치는 property +버튼을 누르면 보이는 곳.

여러 컴포넌트가 섞였을 때 문제는 프로퍼티를 수정하기 위해 하나하나 그 요소를 클릭했을 때만 수정이 가능했는데

property에서 nested instances를 눌러주면 복합적인 컴포넌트 하나만 눌러도 우측 패널에서 모든 프로퍼티값을 확인할 수 있다. (새로나온 기능)

 

 

 

 

 

마무리하며...

요새는 코딩을 하느라 전에 어떤 것을 했는지 조금은 까먹어서 조금 속상했다.

망각의 동물이라서 그런것일까 (이럴때 쓰는 표현은 아닌 것 같다)

까먹으면 다시 해보고 다시해보고 하면 된다.

부트캠프에 있을 때 열심히 물어보고 열심히 실습하고 과제해야겠다.

 

생각해보니 부트캠프에 있을 시간이 얼마 안 남은 것 같아서 좀..ㅋㅋ 열심히 해야겠다...

그래도 마지막 프로젝트까지 할 체력은 모아놨다가 원기옥 터뜨려서 마무리를 해야겠다...!!!