[240614] 3주차 WIL

🗓️ 오늘 한 일

✅ 디자인 스낵

✅ Figma 활용법(1) 3~4주차 복습

✅ Fima 활용법(2) 1주차 수강

✅ Figma 활용법(2) 1주차 과제

 

---

 

 

🔖 시멘틱 컬러

사용되는 목적과 UI에 따라 네이밍하고 적용하는 컬러

ex. Blue500 (X) ➔ Primary Color

 

컬러 팔레트 선언 방법(Gray Scale, Primary/ Secondary/ Tertiary)

1. GrayScale 지정

2. 브랜드 컬러 지정

3. 색상 선언

i) Lightness(명도) 값을 조정하여 색상의 10단계를 구성

ii) Hue(색상) 값에 +30/ -30으로 색상을 변경하여 Secondary/ Tertiary 값을 구성

 

📌 HSL

HSL 색상환

➔ Hue(색상), Saturation(채도), Lightness(명도)

 

- Hue 값(0~360) : 빨강 0/ 초록 120/ 파랑 240 (360도의 색상환을 기준으로 하므로, 360=0=빨강)

- Saturation 값(0~100) : 0은 무채색/ 100은 원색

- Lightness 값(0~100) : 0은 검은색/ 100은 흰색

 

 

---

 

[Figma 활용법 (2) 1주차 강의]

 

📌 합성 컴포넌트

➔ 컴포넌트를 조합해 다시 컴포넌트로 만드는 형태. 개발 단계에서 진행하는 구조와 동일한 구조를 유지하기 위해 컴포넌트를 다시 컴포넌트로 만들어서 작업하기도 함.

 

1. 모달

모달 예시

 

➔ 주로, 라이트박스(투명도 처리된 검은 배경) 처리가 된 화면에 사용자가 행동하기 이전에는 화면을 조작할 수 없는 형태. UI 요소라기 보다는 UI를 분류하는 기준에 가까움 ex. 모달 속성을 가진 팝업창/ 다이얼로그

 

📌 팝업

➔ 하나의 창 위에 다른 창을 띄우는 형태

 

a. 레이어 팝업

레이어 팝업 예시

 

- 새로운 창을 하나 더 띄우는 형태

- 보안상 문제로 팝업 차단하는 브라우저가 많아져 최근에는 잘 쓰이지 않음

 

b. 레이어 팝업

레이어 팝업 예시

 

- 창 위에 컴포넌트를 띄워 보여주는 형태

- 최근에 많이 쓰임

 

 

📌 다이얼로그

➔  사용자의 의사를 물을 때 쓰이는 컨테이너 컴포넌트. 선택지의 유형에 따라 조작 방식이 달라질 수 있다.

 

a. 사용자가 A 또는 B를 선택해야 하는 상황 - 다이얼로그

- 라이트박스를 누르면 취소/ 닫기가 가능함

 

b. 사용자에게 경고 또는 확인 등을 표시하는 상황 - 얼럿(Alert)

- 라이트박스를 눌러도 취소되거나 닫히지 않음

- 얼럿이 다이얼로그와 같이 라이트박스를 눌러서 닫히게 되면 사용자가 입력한 정보를 잃게 되거나 반드시 알아야 할 정보를 놓치게 될 수 있음

 

 

 

2. 컨트롤 컴포넌트

컨트롤 컴포넌트 이미지 - 체크박스, 라디오 버튼, 토글, 슬라이더

 

➔ 사용자가 선택지를 고를 때 이용할 수 있는 컴포넌트.

 

📌 체크박스

- 여러 선택지 중 1개 이상을 선택할 때, 선택/ 선택되지 않음의 의사 표시의 기능으로 사용됨

- 라벨 텍스트와 함께 쓰일 때가 많음

- 중복 선택, 아무것도 선택하지 않은 상태(실제 기획에서 선택하지 않으면 다음 단계로 이동이 불가능한 경우와는 별개로 존재할 수 있는 형태) 모두 가능함

 

📌 라디오 버튼

- 여러 선택지 중에 하나만 선택할 때, 선택/ 선택되지 않음의 의사 표시의 기능으로 사용됨

- 중복 선택이 불가능함

 

 

 

---

 

[Figma 활용법 (2) 1주차 과제]

Figma 활용법(2) 1주차 과제

 

1주차 링크

 

---

 

3주차 WIL

FACTS(사실, 객관) :

- 이번주에는 UXUI 디자인 입문 과제를 진행했다. 과제를 어떻게 진행해야 하는 것인지를 모르겠어서 발제 문서를 계속해서 다시 확인하기도 하고, 같은 부분을 반복적으로 수정하기도 했는데도 방향성을 잡지 못했다. 그래서 튜터님을 찾아갔는데 제대로 질문을 하지 못했다. 지금까지 진행한 과제를 제대로 하고 있는 게 맞는지 모르겠어서 찾아왔다고 말씀을 드렸는데, 어차피 해설 강의와 피드백을 받기까지 시간이 얼마 안 남았는데, 지금 정답을 알려줄 수는 없다고 하셨다. 튜터님은 전체적인 내용보다 정확히 모르는 부분을 물어보라고 하셨는데, 나조차도 어느 부분을 모르는 것인지 알지 못해서 제대로 된 질문을 못했다. 그래서 도움을 제대로 받지 못했고, 이후에도 과제의 방향성을 잡지 못해서 제대로 마무리하지 못한 것 같다.

 

- 디자인 입문 과제 이후, 새로운 팀원 분들을 만나 새로운 팀을 만들었다. 오전에는 데일리 스크럼을 하고, 오후 2시부터 디자인 스낵 타임을 가지고, 저녁 이후에 일일 회고를 진행했다. 이전 조에서는 소통이 거의 없었는데, 팀 일정 자체가 많아지면서 팀원들과 다양한 의견을 주고 받았다. 그 과정에서 인사이트를 얻고 서로 긍정적인 에너지를 받을 수 있었다.

 

FEELINGS(느낌, 주관) : 

- 과제를 스스로 이해하지 못했는데, 정확히 어느 부분을 모르는 지도 모르겠어서 혼란스러웠다. 과제를 마무리하고 이미 제출을 했는데도 과제에 대해 이해를 못한 것 같아서 답답했다.

 

- 처음 새로운 팀원 분들을 만났을 때는 긴장을 많이 했었다. 그런데 다른 팀원 분들이 분위기를 주도해주셔서 다행이라고 느꼈다. 

 

FINDINGS(배운 것) :

- 과제를 제대로 진행하지 못한 이유는 방법론에 얽매여서 각 과제 단계를 유기적으로 연결시키지 못했기 때문인 것 같다. 그래서 과제 전체에서 하나의 방향성을 잡지 못했고, 스스로 헷갈리는 부분이 어느 부분인지도 알지 못했던 것 같다. 

 

- 주제와 크게 상관 없는 이야기더라도 대화 자체가 많아지다 보니까 서로에게 배울 점이 많아졌다고 생각한다. 같은 부분에 대해서도 서로 생각하는 것이 다르기도 하고 같은 의견이라도 전달하는 방식에 따라 다르게 들릴 수 있다는 걸 다시 한번 생각하게 되었다.

 

FUTURE(미래) : 

- 앞으로는 과제를 진행하기 이전에 전체 과제가 요구하는 바가 무엇인지 판단해야 할 것 같다. 방법론 자체는 형식일 뿐, 과제의 목적이 아니기 때문에 진짜 중요한 것에 집중해야 겠다.

 

- 앞으로도 팀원 분들과 더 많이 소통하고, 각자의 생각을 전달함으로써 서로 많은 걸 배워가는 시간을 가지고 싶다.