[12/20 부트캠프] 카타, 피그마 개인과제 디벨롭

 

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

 

📌To Do List

* 카타: slack 발표 ✅ -마지막!!!

* 과제1: 피그마 개인과제 디벨롭 🤔(아이콘만 제작하다가 하루가 끝났다 ㅎ)

* 과제2: UT문제정의 디벨롭 ✅❌

 

 

 

 

01 카타: SAAS(Figma, Notion, Slack)

✏️Figma

우리가 앞으로 많이 사용할 UI/UX디자인 협업도구가 될 것이다.

피그마는 개발언어를 기준으로 만들어진 서비스이기 때문에 피그마에서 만든 디자인 css에 대한 코드를 바로 복사+붙여넣기 해서 사용할 수 있다.

실제로 dev버전으로 변경해서 그 기능을 봤는데 html까진 아니고 css만 구현됐다는 것을 확인할 수 있었다.

(html과 css모두 사용할 수 있도록 구현해놓은 건줄 알았다..ㅋㅋ)

 

제일 혁신적이라고 생각했던 기능은 버전 히스토리였다.

파일이 지워졌다거나 이전 버전의 디자인이 필요할 때 버전 히스토리로 시간을 되돌리면

특정 지점으로 돌아가서 전에 만들어놨던 디자인을 가져올 수 있다.

내가 아는 기능이라곤 뒤로가기 기능밖에 없었는데 이런 것 까지 가능해서 피그마를 많이 쓰는 게 아닐까.

 

앱도 포토샵, 일러스트 이런 툴에 비해서 가벼워서 작업도 원활하게 할 수 있고

무엇보다 다양한 플러그인을 지원하는 것도 한 몫 하지 않을까 생각된다.

실제로 플러그인을 통해 빠르게 뭔가를 만들기가 가능해서 편리하다고 생각한다.

목업도 가져올 수 있고, 아이콘뿐만 아니라 만들고자 하는 걸 자동화시켜놔서 하나 하나 만들기 보다는 플러그인을 검색해서 사용하는 것을 적극 추천한다.

 

그리고 한 가지 더 놀랐던 사실은 시장 점유율이었다.

현재 Figma가 다른 서비스에 비해 압도적으로 많이 사용하고있었고 그 다음은 Sketch - XD 순이다.

어디까지나 UI디자인 툴로써의 그래프인 것 같다. 어도비 포토샵이 제일 끝이어서 마음아플뻔했다.

 

XD는 내가 UI를 완전 몰랐을 때 어느정도 툴을 익힌 경험이 있었는데

이 XD가 23년 4월 1일부로 신규유저 기준 서비스를 종료했다고 한다.

기존 유저는 사용이 가능한데 신규유저는 안된다라...

자연스럽게 XD는 점점 안쓰게 되겠지.

 

2,500명중 2,254명이면 거의 대부분이 Figma만 쓰고있다는 것...! ㅠㅠ

독점의 우려가 생기면서도 모두가 하나의 툴을 공유함에 편리함을 느끼는

이중적인 마음도 동시에 생겼다.

 

전에 튜터님께서 말씀하셨던 게 기억에 남는데, 새로운 툴은 계속 생길 것이고

그 툴을 계속 습득하고 배우려는 마음을 가져야한다고 하셨다.

그래야 도태되지 않는 디자이너가 될 수 있다면서..

Figma가 현재는 우세한 툴이지만 추후에 더 좋은 툴이 나오면 그것도 적극적으로 학습해봐야겠다고 다짐했다.

 

 

 

✏️Notion

개인으로 써도, 업무용으로 써도 아주 유용했다.

saas의 특징 중 하나는 사용성이 쉽다는 것이었지만

사실 나에게 노션은 어려운 툴이라고 과거에 느꼈었다.

툴 사용법을 숙지하지 못해서 노션에서 뭔가를 만들 때 아무것도 못했었지만

지금은 잘할 수 있게 되었다!

 

한 가지 팁으로 본인만의 노션 페이지를 만들어보길 권장한다.

나는 템플릿을 통해서 그 기능을 습득한 케이스인데

템플릿을 보면 무료 버전의 예쁜 디자인을 볼 수 있다.

그 템플릿을 사용해서 변형해서 현재의 나만의 노션을 만들 수 있었다.

 

이런식으로 꽤 많이 만들어놓긴 했는데 사실 안쓰는 기능들이 태반이다..ㅋㅋ

노션의 단점으로도 꼽을 수 있을 것 같다.

이렇게 만들어둔 걸 안써버리는 경우도 허다하다.

 

노션도 슬랙과 마찬가지로 개발 블록 기반인 것을 볼 수 있다.

영역이 확실하게 나뉘어져있고, 개발자들이 노션을 꾸미면 더 잘할 수 있을거라고 본다..ㅋㅋ

 

노션은 타 부서, 팀들간의 업무 진행상황을 쉽게 파악할 수 있고 무엇보다 '실시간'반영이 된다는 점.

특히 제일 확인하기 쉬운 점은 업무일지 파악이라고 생각한다.

오늘 어떤 회의를 진행했고, 어떤 업무를 해야할지 그리고 회사의 앞으로의 분기별 목표를 설정해서 다같이 공유할 수 있다.

브레인 스토밍도 가능하고 다른 외부 도구와 연동 뿐만 아니라 다양한 데이터를 토대로 표, 캘린더, 보드, 그래프 등을 구현시킬 수 있다.

 

전에 다녔던 회사에서는 팀원간의 상태가 어땠는지 이모티콘과 함께 기입을 하게 했다.

예를 들어 팀원이 회사생활할 때 뭐가 힘든지 인간적인 면모도 볼 수 있었다.

ex. (힘든점) 개발 업무를 하면서 숫자 계산할 때가 어려웠다. (감정) 힘들고 지칠때가 있음

이런식으로 정말 공개적인 노션에서..ㅋㅋㅋㅋ 적는 것도 봤는데 좋았던 포인트라고 생각했다.

저 사람이 현재 어떤 것에 어려움이 있는지 모두가 알 수 있어서 그 부분에 대한 도움을 줄 수 있다고 생각했다.

그리고 뭔가 더 친근감을 느꼈다..ㅋㅋㅋ

이런 어떤 팀의 협업 분위기 도모하는 데에도 도움이 된다고 생각했고, saas관련 툴의 장점을 몸소 느낄 수 있었다.

이런 부분을 앞으로 함께할 팀에서 얘기나눠보면 좋겠다는 생각이 들었고 공부해야하는 공통의 목적을 가졌으니 서로에게 더 도움이 되어줄 수 있을 것이라고 생각한다.

 

• 팀원 성격 파악하기
• 업무 시, 어떤 점이 힘든지? 그래서 감정이 어땠는지?

 

 

✏️Slack

슬랙에서 AI기능을 제공해준다고 하는데 그 기능을 찾지 못했다.

내용 요약 버튼 + 챗봇 질문/답변 기능이 어디있을까요...?

 

기본적으로 슬랙은 #채널의 기능을 활발하게 쓰고있다.

그 안에서 스레드, 이모지남기는 기능, 앱 연동 등 다양하게 사용할 수 있다.

알림 오는 방식도 정말 다양했다.

키워드 알림, 특정시간 알림 등 다양한 알림을 제공해준다.

 

이모지는 직접 만들어서 사용할 수 있는데

한국인의 이모지 사용률이 76%

동료가 이모지 사용할 때 호감을 느낀다 79%

이모지 사요아면 팀 내 아이디어 공유에 도움준다 75%

일 정도로 한국에서는 이 이모지 사용을 아주 활발하게 사용하고 있음을 알 수 있다.

참고 사이트: https://www.tleaves.co.kr/news/articleView.html?idxno=4325

 

"업무를 더욱 단순하고 즐겁고 생산적이게 만들자!" 는 슬랙의 목표와 가장 잘맞는 예시로 이 이모지 기능이 크다고 느꼈다. 

 

 

 

경쟁사로는 잔디와 카카오워크가 있는데

전에 카카오워크를 써봤을 때 카톡과 별다른 바가 없어서

슬랙으로 툴을 옮긴 후엔 카카오워크를 사용하지 못했다.

그 이유는 슬랙이 그정도로 기능도 많고 업무에 대한 소통을 했을 때 뭔가 '빨리'업무를 파악하고 행동에 옮겼던 것 같다.

왜인지는 모르겠지만 그 정도로 슬랙 서비스가 업무협업 시 탁월해서가 아닐까 하는 생각이 들었다.

 

 

다양한 SAAS툴을 비교하고 분석해보면서

왜 우리는 SAAS툴을 사용해야하는지, 사용하는 목적이 무엇인지 알 수 있었고

각 서비스에 따른 장단점과 핵심적인 기능/가치를 판단함으로써

실제로 업무에 뛰어들었을 때 어떤 기능을 써야 보다 효율적으로 일할 수 있을지 고민하게 됐던 시간이었다.

 

 

 

 

 

02 피그마 개인과제 디벨롭

✏️아이콘 24*24

① 24*24px로 제작
② 24*24px 안에 20*20px 프레임 생성
③ 아이콘 flatten, outline stroke주기
④ 아이콘에 컬러X → 블랙/화이트로 통일성 유지
이 아이콘을 네비게이션으로 제작 시 어떻게 사용할 지 나중에 고민해보기

 

일단 24px로 맞춰지지 않은 아이콘을 다시 24*24로 맞췄다.

24*24가 아닌 24*19.5로 제작했었는데 이렇게 하면 안됨.

24*24 안에 또다른 20*20프레임을 만들자. (이렇게 하는 이유는 그래픽 아이콘의 경우 24*24px에 다 맞추려고 하면 뚝뚝 짤려보일 수가 있기 때문이다.)

 

피그마 특강에서 배웠던 flatten과 outline stroke도 주었다.

패널에서만 들어갈 수 있을 줄 알았는데 우측 클릭할 때 메뉴에도 있었다. 참고!

 

🤔 아이콘에 이렇게 소수점이 들어가는 경우가 생기는데 이건 어떻게해야 정수로 맞춰질까?

이럴 땐 역시 찾아보는 게 가장 도움된다.

→ 정수가 안되면 0.5소수점에 맞춰 제작하는 걸 추천한다고 한다.

 

 

찾아보면서 해상도 얘기가 나왔는데 또 헷갈리기 시작했다ㅠㅠ

dpi와 배수이야기가 나오는데 숫자가 등장해서 그런지 마음도 멀어졌다..

그럼에도 알아야겠다는 생각에 이전에 카타에서 진행했던

해상도 자료 + 검색 자료를 통합해서 표로 정리해봤다.

화면의 픽셀 밀도를 나타내는 단위
🤔PPI vs DPI는 무엇이 다를까? 디지털 VS 인쇄를 나타낸다

화면의 밀도 단위	PPI (Pixel Per Inch)	DPI (Dot Per Inch)
뜻	1인치 안에 들어가는 픽셀 수 해상도가 높다 = 1인치에 들어가는 픽셀 수가 많다 = PPI가 높다 = 선명!	인쇄된 이미지의 잉크 점의 양 (프린터는 작은 점을 뱉어서 이미지를 나타내기 때문.) 프린트의 해상도 값
화면 종류	디지털 (모바일, 웹)	인쇄
연관성	대체로 화면의 디스플레이 나타냄 인쇄크기와 품질에도 영향 미침	디지털과 연관X

보통 300PPI가 일반적이라고 보면 되고, 이 기준점을 변경하지 않을 것을 추천한다.
PPI를 키울 경우 파일의 크기가 커지기 때문에 필요한 경우에만 PPI높이기!
근데 어차피 웹/모바일에서는 정해진 px밀도가 고정돼 있기 때문에 PPI를 높여도 똑같다고 한다!
ex. 72PPI 이미지와 3000PPI이미지는 동일하게 나타난다.
그래서 광택 표면에 미세한 디테일이 많이 포함된 인쇄의 경우, 인쇄할 크기가 커지면 PPI도 높아진다. (크기에 따라 바뀔수있다) 그래서 인쇄는 인쇄할 크기에 따라 높은 해상도를 사용하는 것이 좋다.

TIP: 
출력물: 300DPI
디지털 이미지: 72PPI 로 작업한다

참고한 사이트:
DPI? PPI? 헷갈리는 이미지 해상도 개념 정리!
PPI vs. DPI: what's the difference?

 

이렇게 인쇄 밀도의 단위가 DPI인 것을 검색을 통해 알게되었는데 일반적인 정의는 인쇄 단위였지만

안드로이드에서 정의한 가이드는 또 다른 내용이었다.

(인쇄) DPI: 인쇄된 이미지의 점의 양

(안드로이드) DPI: 1인치당 픽셀 수 였다. Dot Per Inch인데 픽셀 수라고????

두 가지의 뜻이 존재한다는 것일까? 아니면 안드로이드에서 정의한 DPI가 나중에 등장한 개념인 것일까?

 

다시 안드로이드에서 정의하는 DPI의 개념을 알아봤다..

머터리얼 디자인 가이드에서는
dp: Android에서 정의한 독립적인 논리적 단위로, pt와 동일한 밀도를 나타내는 단어이다.
dpi: 1인치당 몇개의 픽셀이 있는지

160dpi(mdpi) = 1배
240dpi(hdpi) = 1.5배
320dpi(xhdpi) = 2배
480dpi(xxhdpi) = 3배

 

그렇다면 피그마에서 어떻게 아이콘을 만들어야할까?

이건 유튜브를 통해 알아봤다.

 

＊ 아이콘 키라인 만들기

 

머터리얼 아이콘에 키라인을 다운받고 피그마로 가져와줬다.

24*24 프레임을 만들고 grid를 기본값 10px에서 1px로 값을 변경해준다. 빨간색 라인도 10%에서 20%로 높여주었다.

 

그리고 4px을 기준으로 가로,세로, 대각선 라인을 넣어서 키라인을 완성했다.

 

완성!!!

 

 

2번째: union selection / 3번째 Subtract selection... 순서대로!!

아이콘을 만들기 위해서 꼭 필요한 불리언이라고 한다.

여기서 이런 버튼을 boolean으로 부르는 이유는 해당 영역을 껐다 켰다 해서 그런 것이라고 생각한다.

 

드롭다운에서 보이는 영역을 보면 흰부분에 있는 아이콘 영역이 보여진다는 뜻이다.

피그마에서 아이콘 작업할 때 이부분이 헷갈렸는데 흰 부분이 보여지는 영역이다 메모하기!

기능을 하나하나 눌러보면 무슨 말인지 잘 이해할 수 있을 것이다.

 

이런 아이콘을 만들어서 프로퍼티로 조절해서 아이콘을 fill로 할건지 선으로 할건지 선택하면 되는 것 같은데 일단 해보자.

 

아이콘을 만들고 png와 svg 각각 1배수로 export했다. 

그리고 그 파일을 다시 불러오니 svg는 깨지지 않았고 더블클릭해보면 전체가 벡터로 돼있었다.

png파일은 좀 깨졌다.

 

 

그리고 여기서 꿀팁!

피그마에서 만들었던 frame에도 적용되고 블러온 svg파일에도 적용이 된다.

우측 클릭해서 Copy/paste - Copy as SVG를 누르고 복붙하면 아래와 같은 코드가 생성된다.

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H7V4H17V2H19V4C20.1046 4 21 4.89543 21 6V20C21 21.1046 20.1046 22 19 22H5C3.89543 22 3 21.1046 3 20V6C3 4.89543 3.89543 4 5 4V2ZM5 10H19V20H5V10ZM17 14H13V18H17V14Z" fill="black" fill-opacity="0.54"/>
</svg>

어쩐지 가끔 개발자도구를 열고 아이콘을 다운받았는데 이런 코드가 뜨는 경우들이 많았다.

이런식으로 아이콘을 만드는지 처음알아서 좀 신기했던 기능이었다!

 

왼쪽/원본 아이콘, 오른쪽/outline stroke를 깨준 아이콘그

🤔그러면 아이콘을 수정하는 경우가 있을수도 있을 텐데, 원본파일을 그대로 유지하는 건가?

 

 

 

이렇게 피그마에서 구현이 어려운 도형같은 경우, 일러스트레이터에서 fill로 작업을 한다.

그리고 이걸 figma로 가져와서 stroke작업을 해주면 된다.

 

애매한 아이콘의 경우 피그마로 어떻게 구현하는지 궁금했는데 

일러스트를 통해서 전부 하는게 아니라 선으로 이루어진 아이콘의 경우는 피그마로 가져와서 작업한다는 것을 알 수 있었다.

아무래도 일러스트에서 도형깨기를 하고 가져오다보면 선이 일정하지 않은 경우가 있었지만

피그마로 파일을 가져와서 수정하면 모두 동일한 사이즈로 작업이 가능하다.

 

 

 

개인과제를 하다가 어쩌다보니 피그마로 아이콘 그리기까지 가게되었는데

이제 다시 돌아와서 아이콘 제작을 했다.

왼쪽:기존 아이콘 / 오른쪽: 피그마에서 수정한 아이콘

왼쪽이 뭔가 더 예뻐보이는데 오른쪽을 써도 될지... ㅠㅠ

2px로 작업햇을 때 아이콘이 별로 예쁘지 않게된다.

튜터님한테 물어봐야겠다. 🤔오른쪽 퀄리티 괜찮나요..ㅎ

🤔 Live 아이콘의 경우 가운데 컬러가 들어갔을 때 어떻게 사용해야하는지? (기본값을 블랙으로 만들어야해서 그렇게 만들었다)

 

피그마에서 아이콘을 구현하는 것 자체도 긴 시간이 걸렸다.

그래도 어느정도 아이콘을 피그마로 그리는 작업을 하다보니 조금은 자신감이 생겼다.

 

이렇게 아이콘을 수정하니까 네비바에 있는 버튼 영역 컴포넌트가 이렇게 변했다.

그니까 내가 값들을 잘못 설정한 것이다..

엉망인데 figma를 잘한다고 생각했다니.. ㅠㅠ

일단 아이콘 - 네비게이션 바 - 합성 컴포넌트 설정을 다시 해봐야겠다.

이걸 언제 또 해야하지? ㅠㅠㅠ시간이 부족하다 부족해....

일단 오늘은 여기까지 진행하고 주말에..ㅎㅋㅋㅋ 시간이 있다면~? (없음)

다음주에 새롭게 진행될 UX보충 프로젝트를 위해

강의를 재수강해야겠다.

 

 

 

 

WIL

Facts

이번 일주일 동안 있었던 일, 내가 한 일

 

- 올라의 웹플로우 랜딩페이지를 노코드로 만들었다. 코딩과 비슷하면서도 다른느낌이었다.

올라의 랜딩페이지를 피그마에서 오토레이아웃으로 먼저 만들어 놓고

그 이후에 header, 콘텐츠 내용, footer를 순서대로 만들었다.

뼈대부터 잡기보단 css까지 한번에 잡고 인터랙션은 그 이후에 만들었다.

특정 콘텐츠에 hover했을 때 콘텐츠가 위로 떠오르는 그런 효과도 만들고

header를 누르면 최상단 영역으로 슈욱 올라가게 만들었다.

 

- 디자인 카타에서 SAAS의 특징과 해당 서비스의 특징 및 기능들을 파악할 수 있었다.

 

- 남는 시간에 따로 개인 공부를 하며 몰랐던 정보를 직접 검색하거나 기존 문서를 다시 훑어보며

까먹었던 것을 다시 상기시켰고 몰랐던 정보는 새롭게 알아가는 과정을 가졌다.

 

 

 

Feelings

나의 감정적인 반응, 느낌

 

- 쉬우면서 어려운 느낌이 동시 들었다.

디자인 같은 경우는 창작의 고통 + 재밌는 느낌이라면

코딩은 뇌를 쓰는 힘듦과 재밌음이 동시에 공존했다..ㅋㅋㅋ 뭔말알...?

 

- 디자인 카타가 오늘이 마지막이라 해서 아쉬움과 안도감?ㅋㅋ이 공존했다.

안도감은 뭔가가 끝났다는 사실에 대한 안도감인 것 같다.

 

- 직접 해보며 모르는 정보를 찾았을 때 머리에 제일 잘 들어오는 것 같다고 느꼈다.

 

 

Findings

그 상황으로부터 내가 배운 것, 얻은 것

 

- 새로운 개념을 배우고 (영어가 많다) 토익 영어단어 공부 하듯이 하다보니..ㅋㅋ

피그마에서 어렵다고 생각했던 개념들이 오히려 쉽게 느껴졌다.

처음엔 constraints가 무엇인지 swap instance가 뭔지 너무 헷갈렸는데

코딩의 개념이 좀 잡히니 피그마의 구조를 더 확실하게 볼 수 있었다.

 

하나의 섹션을 만드는 데에도 무슨 몇분을 하고앉아있고

포토샵이나 피그마로 만들면 뚝~딱 할텐데

개발로 진행하려고 하니 시간이 오래걸리고 오류도 많이 생겨서

생각보다 개발이라는 작업이 오래 걸리고

집중력과 해결방법을 요구하는 작업인 것을 알 수 있었다.

 

- 카타를 통해 기본적인 UIUX의 기본기를 다듬을 수 있었고 실제 실무에서도 다루는 다양한 정보를 얻을 수 있었다.

 

- 개인 공부를 하며 기존에 잘 다루지 못했던 아이콘을 figma에서 만들 수 있게 되었고, 어떤 점이 부족한지 파악해서 고칠 수 있는 눈을 기른 것 같다

 

→ 부트캠프를 통해 기본기를 탄탄하게 만들 수 있었다.

 

 

Future

배운 것을 미래에는 어떻게 적용할 지

 

- 현업에 계신 개발자분들이 안된다 할 때 왜 안되는지 이해할 수 있을 것 같고

전부 다 이해하진 못하겠지만 기획을 해서 개발자와 소통할 때

원하는 효과 및 기능 개발을 요구할 수 있을 것 같다.

 

- uiux프로젝트를 한다면 더 잘 이용할 것이라고 생각한다.

 

 

KPT

KEEP

어떤 것을 만족하고 어떤 것을 잘하고 있나요?

 

html뼈대와 css의 위계를 잘 이해하고 있고 인터랙션이나 효과 제작할 때

좀 더 재미있게 표현하고자 하는 욕심이 있어서

어떻게 하면 움직이는 효과를 줄 지 고민하고 적용해보고자 하는 자세를 갖고 개발했다.

 

 

 

 

Problem

현재 문제라고 생각하는 점과 변화가 필요한 점은 무엇인가요?

 

class selector 수정이 제일 어려웠다. 어떻게 수정해야 위에 작업한 내용도 안뒤틀리고 작업할 수 있을지 고민을 하며 랜딩페이지를 만들어서 머리가 아팠다. 

 

 

 

 

 

Try

어떻게 더 좋은 방향으로 진행할 수 있을까요? (시도할 것, 해결책)

 

다음엔 리액트를 배우니 여기에서는 class를 제대로 수정해보려고 하고

생각보다 수강생분들이 다양한 인터랙션을 구현하고싶어한다는 것을 알게되었다. 프로 열정러들이다..

그래서 만약 리액트 프로젝트를 하게된다면 html, css를 넘어서 좀 다양하고 특이한 효과? 인터랙션을 퍼블리싱 하고싶어졌다.

시간 안에 할 수 있을 지는 잘 모르겠지만 ㅋㅋ 일단 그렇다!