Week 5
2024.11.20(Wed)
- 베리어블
-컬러
-스트링2024.11.22(Fri)
- 베리어블
-넘버
-불린2024.11.25(Mon)
- 프로토타입
-트리거
-액션
13일차(2024.11.20)
개념 정리(13&14일차)
베리어블(variable)
색상, 폰트, 모드변환 등 스타일과 같이 속성들을 등록해서 재사용할 수 있게 만드는 것
스타일과 베리어블은 어떤 목적으로 사용하느냐에 따라 선택한다.
1. 컬러(color)
- 색상값 저장
2. 스트링(string)
- 텍스트값 저장
- 언어 전환
3. 넘버(number)
- 텍스트 저장
- 텍스트크기, 코너크기, 그리드, 투명도, 이펙트
4. 불린(boolean)
- 객체 노출/비노출
스타일과 베리어블의 차이
| 스타일 | 베리어블 |
|---|---|
| 효과와 그라디언트를 지원 (다중속성) | 효과와 그라디언트 폰트속성을 지원하지 않음 (단일속성) |
| 컬러칩 동그라미 | 컬러칩 네모 |
| 반복 다중속성 | 반복 단일속성 |
베리어블 구조
컬렉션-모드-그룹-변수
모드를 전환하며 사용할 수 있다
여러가지 경우의 수를 등록해서, 전환해가며 사용
ex) A스타일 or B스타일 / 다크모드 ot 라이트모드
베리어블 등록 순서
-
베리어블에 변수등록
-
레이어에 반영 및 적용
-
프레임/섹션에 각각 모드 설정
과제
요구사항
- 베리어블을 사용하여 모드 전환을 구현해볼 것
실습과정 및 결과
컬러별 모드 변환 및 베리어블 그라데이션
베리어블 세팅
베리어블 그라데이션 세팅 과정
베리어블 그라데이션 모드별 전환
베리어블 UI화면 모드별 전환, 내 사진과 아무말대잔치를 활용하여 UI화면을 구성해보았다.
베리어블 UI화면 실제 모드별 전환 구현
회고
이때까지 배웠던 것 중에 가장 어려웠던 거 같다. 아무래도 무료 플랜을 쓰고 있다보니 유료 플랜을 써야 쓸 수 있는 베리어블을 쓸 일이 거의 없었기도 하고 외주 작업을 할 때도 베리어블을 쓸만큼 정교하게 작업할 일이 많이 없었다보니 더 그랬던 것 같기도 하다. 섹션은 그저 화면 프레임의 그룹으로 구분하고 하나의 flow를 구분짓기 위해 하는 줄 알았는데 이런 식으로 모드 전환을 할 수 있다는 건 처음 알아서 굉장히 신기했다. 사실 앞부분은 내가 이걸 들으면서 내가 지금 이걸 듣는게 맞는건가 고민을 많이 했었는데 내가 모르는 부분이 나오니 당황스럽지만서도 어떻게 해야할지를 차근차근 공부해보는 맛이 너무 재미있다. 역시 많이 안다고 생각해도 모르는건 존재하고, 그만큼 겸손해야 하는 것 같다.
이번 수업은 지금까지 배운 것 중 가장 어려웠다. 아무래도 무료 플랜을 주로 사용해왔고, 유료 플랜에서만 사용할 수 있는 베리어블을 다뤄본 적이 거의 없다 보니 더욱 낯설게 느껴졌다. 외주 작업에서도 베리어블을 쓸 만큼 정교하게 작업할 일이 많지 않았던 점도 영향을 끼친 것 같다.
그동안 섹션은 화면 프레임의 그룹으로만 인식했고, 단순히 하나의 플로우를 구분하기 위해 사용하는 줄 알았다. 그런데 모드 전환이라는 새로운 활용 방식을 알게 되니 굉장히 신선하게 느껴졌다. 사실 수업 초반에는 "내가 이걸 제대로 이해하고 있는 게 맞나?"라는 생각이 들 정도로 막막했다. 하지만 시간이 지나며 모르는 부분이 하나둘 나오기 시작하면서, 이를 하나씩 공부해가는 과정에서 묘한 재미를 느꼈다. 이런 게 공부의 재미인 것 같기도 하다. 모르는 것을 알아가는 재미!
"내가 어느 정도 알고 있다"는 자신감이 실제로는 부족한 인식에서 비롯된 착각일 수도 있다는 점을 일깨워줬다. 여전히 배워야 할 부분이 많고, 이런 겸손한 자세로 꾸준히 학습하고자 하는 의지를 불태워야겠다고 다시금 마음가짐을 다잡았다.
14일차(2024.11.22)
개념 정리
variable 등록 및 적용 방법(좀 더 상세하게)(ex.boolean)
-
베리어블 변수 등록
-
레이어 HIDE에 적용
-
프레임별 AUTO모드설정
-
섹션별 모드설정
과제
요구사항
- 모드 전환을 통해 사진을 변경해볼 것
실습과정 및 결과
최종 결과, 원래 한영 변환도 해보려 했는데 이해하는데 오래 걸려서 필수 예제만 집중했다
베리어블 세팅, 블루탱을 한국, 흰동가리를 미국으로 설정했다. 이유는...모른다, 급했다;;
완성된 UI. 베리어블 세팅이 잘 반영되어 사진과 radius가 잘 반영되어 있다
회고
이번 시간에는 처음으로 과제를 내지 말까하고 망설였던 시간이었다. 수업 집중도가 높아야 했는데, 자리 배치 문제로 강사님과 모니터가 너무 멀어 내용을 놓치는 일이 잦았다. 정말 높은 집중력을 요구하는 자리인지라 조금만 놓치면 어디를 하고 있는지 파악하기가 힘들다. 게다가 중간과제 발표 자료도 준비해야 했기 때문에 정신없이 분주했다.특히, 베리어블의 모드 변경 부분에서 이해도가 부족했던 탓에 강사님의 설명을 놓쳐 더 막막했다.
베리어블의 모드 변경을 잘 이해하지 못하는 과정에서 강사님 수업까지 놓치니 어떻게 해야할지 살짝 막막했다. boolean 설정에서는 보여지는 요소와 숨겨지는 요소를 구분하는 작업이 특히 어려웠다. 단일 조건일 때는 비교적 단순하게 해결할 수 있었지만, 조건이 두 개 이상으로 늘어나니 헷갈리기 시작했다. 나는 나름대로 잘 설정했다고 생각했지만, 베리어블이 제대로 적용되지 않아 피그마 기능을 내가 모르는 부분이 있는 건가 싶어 당황했다.
결국 문제가 된 이유는 간단했다. 섹션 내부에서 베리어블을 등록하고 설정해야 하는데, 이 최종 단계를 빼먹은 것이다. 단순한 실수로 인해 한참 동안 기능이 작동하지 않는 이유를 찾지 못하고 헤매고 있었다. 그런 상태에서도 팀원들과 옆 팀의 도움을 받으며 원인을 찾아냈고, 문제를 해결할 수 있었다. 가르쳐주는 것도 중요하지만 내가 도움받고자 할 때는 도움을 요청하는 용기도 필요함을 절실하게 느꼈다.
또한 베리어블을 다루면서 파일 정리에 대한 고민이 더더욱 깊어졌다. 스타일보다 훨씬 세분화되고 정교한 속성을 관리해야 했기 때문에, 이를 효율적으로 정리하는 방법이 필요해보였다. 특히 대규모 프로젝트에서 이런 복잡한 작업을 어떻게 관리하는지 궁금해졌다. 실제 기업에서는 어떤 체계로 이런 파일들을 정리하고 있는지 조사가 필요할 것 같다. 이 부분은 앞으로 스스로 더 공부하고 알아봐야 할 숙제라고 느꼈다.
15일차(2024.11.25)
개념 정리
프로토타입(prototype)
피그마에서 디자인을 인터랙티브하게 만들고, 실제 사용 흐름을 시뮬레이션하는 기능
화면 전환, 사용자 동작에 따른 반응 등을 설정해 디자이너와 이해관계자가 실제 사용자 경험을 직관적으로 확인할 수 있도록 도움
개발 전 디자인 검증 단계에서 중요한 역할
*노드(Node) : 연결된 선
프로토타입 유의사항
- 도형에는 프로토타입이 되지 않으며 프레임으로 만들어져있어야 한다
- 팝업을 만들때도 프레임으로 만들어져 있어야 프레임적용이 가능하다
프로토타입 종류
트리거(trigger) : 계기 - 사용자의 명령/입력
액션(action) : 사용자명령/입력에 대한 결과
과제
요구사항
- 트리거와 액션을 활용하여 프로토타입 구현해보기
실습과정 및 결과
트리거 최종결과 프로토타입
트리거 프로토타입 구현
액션 최종결과 프로토타입
액션 프로토타입 구현
회고
프로토타입 부분은 이전에 다뤘던 내용이라 이번에는 따라가는 데 어려움이 없었다. 하지만 피그마의 프로토타입 시스템에는 아쉬움이 있었다. 출발이 컴포넌트라면 끝도 컴포넌트로 이어질 수 있을 것 같은데, 왜 반드시 페이지로 끝나야 하는지 이해가 가지 않았다.
이번 수업은 비교적 간단한 프로토타입을 다뤘기에 노드가 많지 않았지만, 만약 매우 세부적인 프로토타입을 구현해야 한다면 노드 정리 방식이 중요할 것 같았다. 프로토타입 툴인 프로토파이와 같은 더 전문적인 툴을 사용하는 경우에도 비슷한 고민이 있을 것 같다. 그 안에서도 복잡한 노드들이 생길 텐데, 이를 효율적으로 정리하는 방법이 궁금했다.
개발 환경에서는 이런 문제를 코드로 해결할 수 있지만, 디자이너 입장에서는 툴 내에서 노드를 정리하고 관리하는 일이 생각보다 큰 과제가 될 수 있음을 느꼈다. 앞으로 이런 문제를 해결할 수 있는 더 나은 방식을 고민하고 배워야겠다는 동기를 얻었다.
여담이지만 강사님 개념 오타 좀 안내주셨으면 좋겠다. 피그마 강의안에는 노드가 노브라고 되어 있던데 처음 배우는 사람은 저게 정말 저 단어인 줄 알 거 같다
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
