[10/31 부트캠프] 카타, 피그마 활용법 강의(2) 1주차, 개인 과제

프로덕트 디자이너 부트캠프 D-9 (2주차)

📌To Do List

* 카타: 웹사이트

* 피그마 활용법 강의 (2) 1주차 강의

* (1) 4주차, (2)1주차 개인 과제 (숙제)

 

---

 

01 카타: 웹사이트 조사

엇 스티커로 꾸며진 공간 귀엽다

웹사이트... 대략 알고있긴한데 말로 설명하려니 생각나지 않았다.

 

💡웹사이트
- 맨처음 맞이하며 기업이 자기를 소개하는 페이지.
- 다양한 하위페이지가 포함돼있다.
ex. 브랜드, 제품 판매, 문의, 소개 등
- 여러개의 페이지를 하나로 모아놓은 사이트
- 정보 제공, 특정 제품의 서비스를 알린다.

 

[웹사이트의 중요성]

- 브랜드, 개인은 비즈니스를 많이 하며 이를 온라인으로 표현하는 것이 중요한 시대! 이런 비즈니스가 웹사이트를 통해 진행되기 때문에 중요하다.

- 양질의 시각적 콘텐츠 뿐만 아니라 사용자가 웹사이트를 사용하면서 원하는 정보를 얻을 수 있어야 하고, 편리해야한다.

- 긍정적인 경험을 갖는 것을 최우선적으로!

- 따라서.... 웹사이트 구조를 잘 만들어야한다.

 

 

각자가 생각하는 웹사이트 중에 기억에 남는 좋은 웹사이트가 있다면?

 

이라는 주제로 말해봤다.

 

 

나는 토스채용을 예시로 들어서 말했다.

토스 공고를 찾아봤을 때 일반 구인구직 사이트 예를들면 사람인, 잡코리아 등 토스에 지원해야하는 매력적인 이유를 못 느꼈는데

토스 채용 홈페이지에 들어가니까 브랜드의 이런 저런 정보도 많아서 더 지원하고싶게 만들었기 때문에 좋다고 생각한다.

 

다른 분의 의견!

눈누라는 폰트페이지 들어갔는데 여러가지 폰트를 체험할 수 있도록 상단에 원하는 텍스트 입력 시, 텍스트가 폰트에 맞춰서 미리보기로 보여준다. 그런 시스템이 편리했고 재밌게 느껴졌다.
=> (피드백) 사용자의 명확한 목적이있다.다양한 폰트를 본다던가, 찾는 폰트가 있을 때 눈누 웹사이트를 사용할 것.

 

[좋은 웹사이트란?]
1) 탐색이 간편해야한다.

- 사이트마다 메뉴, 구성, 레이아웃 다 다름. 사용자가 웹사이트 선택한 목적이 있을 것. 목적 달성을 위해 도와줘서 정보를 빠르고 쉽게 사용할수있도록 만들어야한다.

2) 구조가 잘 짜여져 있다. 

- 탐색하는 과정속에서 길을 잃으면 안 된다. 메뉴-하위메뉴 - 하위메뉴.... 처음으로 돌아가고 싶다거나 원하는 페이지 가고싶을 때 가고싶은 곳을 갈수있게 구조를 잘 짜는 것 = 좋은 경험

- 카테고라이징: 카테고리를 잘 나눠야한다. 카테고라이징 잘해줘야 잘 탐색하고 편리하게 사용할 수 있음. 네비게이션을 통해 모든 페이지 갈수있어서 잘 해야한다. 링크가 잘 돼있어야한다. 그래야 재방문율 올라가고 체류시간이 올라가야 좋은 웹사이트!
카테고라이징 예시) 쇼핑몰(신발 아우터 바지...)

 

 

그러고 웹사이트를 찾았는데 시간이 끝나버렸다..ㅋㅋㅋ 내일 이어서 발표진행할 것으로 보임!

 

페이지 하나하나 캡쳐하는 게 불편해서 스크롤하며 캡쳐할 수 있는 앱이 있나 찾아봤다.

Chrome에 GoFullPage라는 확장프로그램이 있었다. 그거를 다운받아서 해봤더니 한방에 딱,,

이거 캡쳐하느라 시간 다썼는데 에라이 ㅠㅠㅋㅋㅋㅋ

찾아서 튜터방에도 공유완료!

---

02 피그마 활용 강의 (2) 1주차

 

어제 숙제를 진행하며 잘 안됐던 기능, 마구잡이로 했던 기능들이 있었다.

좀 느리더라도 확실하게 알고가야겠다 싶어 2차 숙제에 다시 돌진. 하..

 

*버튼 스타일
1. 기본 버튼, 세컨더리 버튼, 터티어리 버튼 v
2. 눌렀을 때, 비활성화 버튼v
3. 사이즈 라지, 미디움, 스몰v
4. 리딩아이콘 불리언, 인스턴스 스왑 적용, 텍스트

*인풋 텍스트 스타일
1. 기본값, 입력값, 모두 입력했을때, 에러, 비활성화
2. 모두 지울 수 있는 버튼 추가

이번엔 완벽하게 됐다!!!

어제 집중이 안됐나보다 무엇보다 인스턴스 스왑을 어떻게 쓰는지 몰랐는데 강의하고 위치가 달라서 자꾸 헷갈렸던 것 같다.

 

---

📌모달

💡합성 컴포넌트(컨테이너 컴포넌트)
- 컴포넌트에 또 컴포넌트를 만드는 경우
- 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 상

🤔팝업 VS 모달??
팝업과 모달의 차이를 생각하며 공부하기
레이어 팝업과 모달을 같은 뜻으로 혼용하는 경우 비일비재. 디자이너가 팝업과 모달의 차이를 정확히 알아야 가이드라인을 만들 수 있다. 어디에서는 팝업 어디에서는 모달.. 어디에서는 다이얼로그...로 불릴 수 있다,

💡팝업(Pop-up)
- 팝!하고 튀어나온다
- 현재 화면 위에 새로운 화면을 띄우는 일

팝업

팝업

 

[팝업 종류]

1) 윈도우 팝업: 새로운 윈도우(브라우저 창)을 띄워주는 방식

- 모바일의 등장으로 점점 사용하지 않는 추세: 광고,악성코드 방지, 보안을 위해 브라우저에서 팝업 차단 → 개발자,사용자에게 불편.

 

2) 레이어 팝업: 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식

 

💡모달(Modal)
- 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것.
- UI를 분류하는 기준 중 하나이며, UI의 속성이다. 이름이 모달인 게 아닌, 이 UI는 모달의 속성을 가지고 있다~
따라서 팝업은 모달의 속성을 갖고있다고 생각하면 된다!

[배경 까만층의 역할]

1) 뒤쪽 화면 멈춤 상태를 안내

2) 로그인 화면에 시선 집중: 사용자가 현재 해야 하는 가장 중요한 부분 노출

 

[모달의 종류]

- 팝업, 토스트, 바텀시트, 다이얼로그, 사이드 바 등...

 

💡라이트박스
- 스크림, 딤드, 딤레이어, 오버레이 등으로도 불림
- 모달 떴을 때 뒤에 가려진 화면은 사용할 수 없다는 것을 보여주기 위한 반투명한 층

 

[라이트박스 사용법]

- 필수X: 모달, 배경의 명확한 분리와 집중할것을 안내하기 위한 목적일 뿐.

 

 

 

- 라이트박스를 누르면 사용자가 취소/뒤로가기 하는 행동으로 간주. 닫기를 누른것과 똑같다

 

❗주의점: 사용자가 중요한 내용 입력 시, 라이트박스를 눌러서 꺼지는 경우가 없어야함.

 

[모달 사용 시 주의사항]

- 제품을 보고있는 사용자를 방해함 : 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 않기 때문.

- 사용자가 최종목적지까지 가는 시간, 비용을 증가시킨다.

- 모달이 많을 수록 사용자가 불편하다. -> 서비스 이탈 가능성 ↑

- 사용자를 방해하면서라도 반드시 확인해야한다면 필요하다.

 

 

 

 

📌다이얼로그 컴포넌트

다이얼로그 컴포넌트 참고!!!

머티리얼 디자인

우버 디자인 시스템

카본 디자인 시스템

라이트닝 디자인 시스템

 

💡다이얼로그(Dialog;대화) 컴포넌트
- 모달 속성을 가진 컴포넌트
- 컴포넌트 종류 중 '컨테이너'에 해당
- 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트
- 대화 그 자체로, 사용자가 선택할 상황이 생길 때 제품은 다이얼로그 형태로 어떻게 할건지 물어보는 것 -> 선택지를 버튼형태를 통해 확인한다.
❗다양한 상황에서 쓰이기 때문에 미리 만들어 놓기 어렵다. 헤더, 액션만 만들고 그 안에 내용부분만 따로 만들어서 유연하게 사용해야함.

 

 

 

[다이얼로그 구조]

 

① 컨테이너(Container)

② 헤더(Header): 썸네일, 아이콘, 닫기 버튼 등이 들어갈 수 있음.

③ 액션(Action)

 

 

[다이얼로그 설계 시 유의점]

① 선택지의 유형에 따라 조작법이 달라짐

- 사용자가 A or B 선택해야 하는 상황: 다이얼로그 → 라이트박스 누르면 취소/닫기 누른 것과 동일

- 사용자에게 경고/확인 등 표시할 때: 얼럿(alert) → 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련있어 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫아야함

 

 

② 사용자 흐름에서 필수로 거쳐야 할 때 사용  → 필수 상활일때만 사용.

이 경우 사용자가 할 수 있는 상황이 확인밖에 없다. '확인'누르기위해 집중하고있던 상황을 방해.

이럴 땐 토스트를 써서 안내정도로만 써주자.

 

---

실습: 다이얼로그 만들기

- TIP: 콘텐츠 내용에 따라 콘텐츠 영역의 관리가 어려울 수 있다. 헤더/액션 분류해서 관리해야한다.

1. 헤더 만들기

① 다이얼로그 제목이 될 텍스트 입력 / Title: 18px
② 부제목 텍스트 입력/ 색상 연하게 / Body:16px
③ 두 개 묶어서 오토레이아웃만들기(헤더영역 만들기)
④ 내부 간격 8px / 좌우패딩 20px
⑤ 프레임 이름 변경: Dialog/header (Dialog 폴더 안에 header라는 컴포넌트가 들어가있다는 뜻)
⑥ 제목, 부제목 선택 - Fill로 변경
⑦ 컴포넌트 만들기  - 제목, 부제목 Text 프로퍼티 적용. (제목: Title / 부제목:Subtitle)
⑧ 부제목 불리언 프로퍼티 - Show Subtitle:True (부제목은 있을경우와 없는 경우가 있기 때문)

2. 액션 만들기

① 컴포넌트로 만들었던 버튼 인스턴스 - 오토레이아웃 적용, 좌우패딩 20px
- 만약 버튼이 다이얼로그 사이즈만큼 늘어났으면 좋겠다! 이러면 버튼에 fill 적용 
② 컴포넌트 만들기 - 버튼 인스턴스 이름 명 변경: Dialog/action

 

3. 다이얼로그 만들기

① 새로운 프레임 생성 - Header, Action 인스턴스 가져오기 - 둘 다 선택해서 오토레이아웃
② 이름 Dialog로 수정
③ Dialog프레임 배경색: 흰색 (Header, Action에 배경색을 각각 넣지는 않는다. 여기도 배경색이 있는데 Dialog에도 배경색이 있으면 문제 생길 수 있음)
④ 곡률 16

 

 

4. 다른 버전의 다이얼로그 만들기

① 텍스트필드 인스턴스 중 'Default' 가져오기. - 오토레이아웃 적용 / 좌우여백 20px , 상하 10px
② 이름 Content로 변경
③ 만들어놓은 다이얼로그에 드래그하여 순서 가운데로 변경하기
④ 오토레이아웃은 다이얼로그 가로사이즈에 맞게 모두 fill로 변경
- 리사이징은 하나 하나 찾아서 수정해야하니, 리사이징값 잘 조절하자!

 

아 자꾸 콘텐츠가 다이얼로그 안으로 드래그가 안돼서 그냥 ctrl + c / ctrl + v했다.

완성!!!

 

이게 쉬운버전이라니 ^^^....

왜 기존꺼에 오토레이아웃을 계속해서 적용하는지... 아 지금 글 적으면서 알게됐다. 여백과 각 다이얼로그에 맞는 컴포넌트 이름을 지정하기위해서 오토레이아웃을 만드는 것 같다 해결~!^^ㅋㅋㅋ

 

---

 

📌컨트롤 요소 이해하기

💡 컨트롤 컴포넌트
- 사용자가 선택할 수 있는 컴포넌트

 

[컨트롤 컴포넌트 종류] 시스템들끼리 큰 차이 나지 않음

체크박스, 라디오, 스위치(토글), 슬라이더

 

[컨트롤 요소 설계 시 참고]

1) 최소 터치 영역

- 다른 UI들에 비해 크기가 작다. 최소 크기 범위 만들어줘야함

 

 

2) 컨트롤 요소의 라벨

- 대부분 라벨과 같이 쓰이므로, 라벨을 탭할때도 컨트롤 요소가 작동하게 해야한다.

 

 

- 간격을 충분히 줘서 잘못 누르는 일 줄이기

 

 

3) 라벨과 정렬

- 더 깔끔한 정렬을 위해 두 요소의 세로길이를 같게 하는 게 좋다.

- 라벨의 세로는 행간과 같다. 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬이 쉬워질 것.

여기서 한 번 더 짚고가자
1) 텍스트 세로 값 = 행간
2) 기본적인 행간이 16px일때 150%하면 행간은 24px 
🤔계산을 어떻게 해요...? 16px을 100%로 두고 나머지 50%를 16px에 적용. 16px의 50% = 8px
따라서 16 + 8 = 24!

 

 

 

📌체크박스 컴포넌트

체크박스 컴포넌트 참고!!!

머티리얼 디자인

우버 디자인 시스템

카본 디자인 시스템

라이트닝 디자인 시스템

 

 

💡체크박스 컴포넌트
- 여러 선택지 중 1개 이상을 선택할 때 사용
- 라벨과 함께 쓰임.

 

[의사상태]

- 2가지: 체크됨, 체크되지않음.

이렇게 더 다양한 의사상태를 가질 수 있다.

 

[체크박스 특징]

1) 여러 개 선택 가능

- 하나 선택해도 다른 선택지에 영향X

 

 

2) 아무것도 선택 안할 수 있음

3) 하위 항목이 있을 때, 일부만 선택 가능 (정책 동의할 때 많이 사용하는 것 같다. 필수요소는 무조건 체크를 해야하고 선택요소는 선택해도되고 안해도되고 선택할 수 있다)

 

 

---

실습: 체크박스 만들기

1. 체크박스 영역 만들기

① 24*24프레임 생성 권장( 4,8배수 적응하기 좋고 기본 폰트가 16px이기때문에 정렬이 쉽다)
② 20*20프레임 생성 / Container이름변경 (기본 텍스트폰트 16px인데 24px을 넣어버리면 시각적으로 체크박스 사이즈가 너무 커보이기 때문에 밸런스를 맞추기 위해) - 하단 이미지 참고할것.
③ Container프레임을 24*24프레임 안에 넣는다.
④ 컨스트레인트 좌우, 상하 모두 center로 변경.
⑤ 체크 아이콘 컨테이너 안에 넣기
⑥ 체크 아이콘 시각보정: 아이콘만 위로 올리기 (착시현상으로 아래로 내려가보이는느낌) - 하단에 시각보정 관련 아티클 참고하기

 

[시각 보정 관련 아티클]

1) 시각적으로 균형있는 디자인 하는 방법(시각 보정 팁)

2) Luke Jones ‘시각적인 보정’을 읽고 든 생각.

 

일단 이렇게 영역을 그렸다

 

 

2. 체크박스 디자인

① 24*24 프레임 흰색 배경 없애기
② 20*20 프레임 배경 프라이머리컬러 변경 - 체크아이콘도 컬러 변경 - 곡률도 변경 (2를 주었다)
📌깨알지식: 우린 접근성을 고려해야한다!
- 앱, 웹 사용 시 장애, 시력이 안좋거나, 고령층, 어린이 등... 그들이 불편함이 없도록 디지털이 불편한 사람들도 배려해야한다 = 모두를 위한 디자인
❗유의: 색상으로만 구분하면 나이가 들거나 안좋은 사람은 미묘한 차이때문에 잘 모를 수 있다. 따라서 굵기에 차이를 주거나 모양에 변화를 주는 등의 방법을 사용하는 것이 좋다. - 하단 예시 참고
📌깨알지식: 곡률
- 곡률은 실무에서 보통 레디어스라고 부름.
- 레디어스 값을 넣을 때 높이의 절반값 이상의 값을 넣으면 안됨. 
ex. 24*24의 레디어스 값은 최대 12px로 넣을 것.
③ 컴포넌트로 만들기 - 이름은 Checkbox

컬러임에도 이렇게 보일 수 있다는 것 / 우측은 다 만든 체크박스 이미지이다.

 

 

3. 배리언츠 적용
- 한 개는 체크된 상태, 하나는 선택되지 못한 상태를 만들 것.

① 배리언츠 - 이름 Checked:True
② 1개 더 복제 - Checked:False - 불리언 값이 적용된다! 근데 굳이..? 각자가 편한 방식대로 불리언 값 적용해도 좋다.
③ False값을 가진 체크박스 디자인 변경하기 
- 배경: 흰색 / 테두리: 회색 / 체크아이콘: 회색

완료~!!

 

---

📌라디오 컴포넌트

라디오 컴포넌트 참고!!!

머티리얼 디자인

우버 디자인 시스템

카본 디자인 시스템

라이트닝 디자인 시스템

 

💡라디오 컴포넌트
- 여러 선택지 중 1개 선택할 때 사용
- 라벨과 같이 쓰인다.
- 의사상태 역시 체크박스와 동일하다

 

[라디오 특징]

1) 여러가지 동시 선택 불가능

- 하나 선택하면 다른 선택에 영향미침

2) 아무것도 선택하지 않는 게 불가능. 반드시 선택해야한다.

- 사용자가 많이 했으면 하는 것을 기본값으로 설정하는 게 좋다.

 

---

실습: 라디오 컴포넌트 만들기

1. 라디오버튼 만들기

① 24*24 프레임, 20*20 프레임 제작: Container이름변경
② Container 레디어스 10 / 배경컬러 프라이머리컬러 변경
③ 프레임 이름 Radio 12*12 - Container 안으로 넣기 - 레디어스 6
④ Container -> 프레임으로 넣기 - 프레임 이름 Radio 변경
⑤ 베리언츠 적용 - Selected:True
⑥ 배리언츠 추가 - Selected:False -> 디자인 변경

 

 

 

 

 

✍️개인 과제

주제: 가상의 로그인 화면을 만드세요 (375*812)

① 텍스트필드 컴포넌트로 이메일, 비밀번호 인풋 만들기
② 체크박스 컴포넌트로 "로그인 정보 저장하기" 만들기

- 왜 라디오가 아니라 체크박스를 써야하는지 이유를 적으세요.
③ 로그인 버튼 및 회원가입 버튼 만들기

 

*심화과제:

① 375 * 812 크기의 화면을 추가로 만들어 주세요.
② 추가한 화면의 이름을 다이얼로그로 변경해 주세요.
③ 다이얼로그 화면 안에 라이트박스와 다이얼로그 컴포넌트를 넣어 주세요.

   - 라이트박스는 화면 크기와 동일한 크기로 만들어 주세요.
   - 색상은 #000000, 색상의 투명도를 60%로 적용해 주세요.

④ 다이얼로그 컴포넌트의 내용은 다음과 같이 작성해 주세요.
    - 제목 : 가입한 적이 없는 이메일 주소에요.
    - 부제목 : 이 정보로 새로 회원가입 하시겠어요?
    - 버튼 라벨 : 회원 가입

 

 

내가 만든 로그인페이지,, 디자인만 했을땐 쉬운느낌이었는데 컴포넌트랑 이것저것 합세하니까

디자인 잘 나올 수 있을까...? 싶었다....

이거 하나하나 수정하는 것도 이게 맞아..?하면서 하긴했는데 익숙해지면 더 잘할 수 있겠지?ㅠㅠ

---

 

블로그에 적으면서 해서그런지 강의 진도가 잘 안나간다 ㅠㅠ

다시 봤을 때도 이해되기 쉬우라고 풀어서 썼는데

거의 대본을 받아적는 느낌이긴했다 ㅋㅋ ㅠㅠ 조금 조절할 필요는 있겠다

 

컴포넌트 적용안했을 땐 쉬워보였던 것들이... 후

디자인을 잘 할 수 있을지 의문이 들었다.

한 번 컴포넌트를 만들 때 정말 신경써서 잘 만들어야하나보다

개인 과제할 때 실제 화면만든 것처럼 적용하려고 하니 폰트도 너무 크고

텍스트도 2줄 넘어버리면 또 수정이 들어가야한다 폰트를 줄여야하는데

이럴때는 인스턴스 컴포넌트 자체에서 수정이 들어가면 되는것일까... 헷갈리는것 ^___^

내일은 이 부분을 물어볼 필요가 있겠다...!!