Week 3
2024.11.06(Wed)
- 오토레이아웃(컨테이너), 썸네일
2024.11.08(Fri)
- 컴포넌트와 인스턴스
2024.11.11(Mon)
- 베리언트(프로퍼티와 텍스트)
7일차(2024.11.06)
개념 정리
오토레이아웃 - 컨테이너
- 컨텐츠 : 안에 있는 소스
- 컨테이너 : 밖에 있는 프레임
자동 사이즈 변경 시 무엇이 기준이 될까?
"하드웨어 변경 시 기준은 컨테이너!"
- 반응형 = UI 하드웨어의 변경시 자동사이즈변경
- 반응형 컨텐츠 제작시 모바일사이즈에서 패드사이즈로 변경된다면, 가장 크게 변동되는 사이즈는 화면 전체의 사이즈 즉 컨테이너의 사이즈
- 세로사이즈는 스크롤이 가능하므로 무한 확장이 가능하며 가로사이즈가 변경된다.
썸네일
해당 디자인의 아이덴티티를 표현하거나, 디자이너의 아이덴티티를 담는다.
피그마 커뮤니티에 개성있는 썸네일들
과제
요구사항
- 오토 레이아웃을 이용하여 반응형 디자인 제작
- 썸네일 개성있게 만들어보기
실습 과정 및 결과
반응형 디자인을 나를 소개하는 내용으로 만들어보았다
개성을 담은...썸네일? 이전에 진행했던 사이드프로젝트의 캐릭터를 가져와 만든 썸네일
강사님의 코멘트에 뿌-듯ㅎㅎ
회고
컨테이너와 콘텐츠가 아직 살짝 헷갈리긴 하지만, 이전부터 계속 해오던 작업이라 무리 없이 진행할 수 있었다. 다만, 다른 분들이 반응형 디자인에서 어려움을 겪는 모습을 보며 실무에서 이를 구현하려면 정돈된 레이어 정리 기술이 필요하겠다는 생각이 들었다. 기초를 탄탄히 다져야 이후 작업이 수월해질 테니 지금부터 더욱 신경 써야겠다고 느꼈다.
어떤 내용으로 반응형 디자인을 만들어볼지 고민하다가, 내 소개 페이지를 만들어 보기로 했다. 단순한 정보 나열보다는 조금 더 특별하게 보여주고 싶었다. 이전에 노션 이력서에 적어둔 내 소개를 다시 옮겨 적으며, 기분이 묘했다. 여기까지 오는 동안의 시간들이 스쳐 지나가며, "7년 전의 나는 지금의 나를 상상했을까?" 하는 생각에 잠시 빠지기도 했다.
하지만 현재의 나는 내가 잘하고 뿌듯함을 느낄 수 있는 일을 찾기 위해 노력하고 있는 중이고, 그 기회를 잡기 위해 준비하는 과정에 있다는 걸 잊지 말자. 열심히 하며 차근차근 나아가다 보면 목표에 닿을 수 있을 거라 믿는다.
8일차(2024.11.08)
개념 정리
컴포넌트(Component)
컴포넌트는 버튼, 카드, 입력 필드와 같은 재사용 가능한 디자인 요소. 한 번 만들어 놓으면 동일한 스타일과 속성을 가진 요소를 프로젝트 내에서 여러 번 사용할 수 있다.
- 마스터 컴포넌트(Master Component): 컴포넌트의 원본. 부모의 개념모든 인스턴스는 마스터 컴포넌트를 기준으로 동기화.
- 인스턴스(Instance): 마스터 컴포넌트를 복제하여 사용한 개별 요소. 자식의 개념. 마스터 컴포넌트의 변경사항이 모든 인스턴스에 자동으로 반영됨.
컴포넌트의 주요 기능
-
일관성 유지
컴포넌트를 사용하면 디자인 시스템의 일관성을 유지할 수 있습니다. 예를 들어, 버튼 스타일을 변경하면 모든 인스턴스 버튼이 자동으로 업데이트됩니다. -
효율적인 수정
마스터 컴포넌트를 수정하면 프로젝트 전체에 반영됩니다. 버튼 색상, 텍스트 스타일, 간격 등을 한 번의 수정으로 적용할 수 있어 시간을 절약할 수 있습니다. -
오버라이드(Override)
인스턴스는 마스터 컴포넌트의 기본 속성을 유지하면서 특정 요소(텍스트, 색상, 아이콘 등)를 개별적으로 변경할 수 있습니다. 변경된 부분은 마스터 변경에도 유지됩니다. -
Nested Components
컴포넌트 안에 다른 컴포넌트를 포함할 수 있습니다. 이를 통해 더 복잡한 UI 요소를 계층적으로 관리할 수 있습니다.
과제
요구사항
- 컴포넌트를 활용하여 티켓 카드와 리스트를 만들어볼 것
실습 과정과 결과
컴포넌트 제작. 공통적으로 자주 쓰이는 리스트 카드, 상단 페이지, 버튼, 아이콘 등을 컴포넌트로 설정
컴포넌트 바탕으로 화면에 디자인 배치. 오토레이아웃으로 카드를 묶어줬다. 살짝의 개성으로 하츄핑을 넣어줬다.
결과물!
회고
컴포넌트를 만들면서 의문이었던 점은 보통은 컴포넌트를 설명할 때 컴포넌트에 속성을 부여할 수 있는 기능인 property 기능을 다음에 설명해주시는 것이었다. 그게 컴포넌트를 쓰는 이유라고 생각하는데... 살짝 의아하긴 했지만 확실히 컴포넌트라는 기능이 처음 쓰시는 분들께는 어려운 기능이고, 나도 처음 이해하는 데 시간이 조금 걸렸던 부분인 만큼 아마 좀 더 길게 설명하시려고 하는 거 같다.
9일차(2024.11.11)
개념 정리
Property(속성) 기능
Property는 컴포넌트 내에서 특정 속성을 조정할 수 있는 기능. 텍스트, 아이콘, 색상, 레이아웃 등을 사용자 정의할 수 있어, 컴포넌트를 다양한 상황에서 재사용할 때 매우 유용.
property 종류
- Varent 베리언트 - 열의 선택 (좌표개념)
▪︎ 다양한 상태를 한곳에서 관리
▪︎ 버튼 컴포넌트를 예로 들어보면, 기본 상태, 호버 상태, 비활성화 상태 등을 각각의 컴포넌트로 만들 필요 없이 Variant로 한 번에 관리 가능
ex)
버튼 기본: 파란색 배경, 텍스트 "Submit"
버튼 호버: 진한 파란색 배경
버튼 비활성화: 회색 배경, 비활성화 텍스트
-
Text 텍스트 - 텍스트 변경
▪︎ 컴포넌트의 텍스트를 개별 인스턴스마다 다르게 설정 가능
▪︎ 버튼이나 라벨의 텍스트를 상황에 맞게 빠르게 수정
ex)
버튼 텍스트를 "로그인", "회원가입" 등으로 변경 가능 -
Boolean 불리언 - 온앤오프 (아이콘/화살표 있고 없음)
▪︎ 요소의 표시/숨김 설정, 특정 아이콘이나 배경의 표시 여부
▪︎ 예를 들어 체크박스 컴포넌트에서 체크 아이콘을 보여주거나 숨기는 기능을 쉽게 구현 가능
ex)
체크박스 상태: 체크 표시 유무를 Boolean으로 설정 -
Instance swap - 인스턴스 스왑 (아이콘변경)
▪︎ 컴포넌트 내 특정 요소를 다른 컴포넌트로 교체
▪︎ 예를 들어 아이콘 버튼 컴포넌트에서 아이콘만 교체하여 다양한 아이콘 버튼 제작 가능
ex)
버튼 아이콘을 '검색'에서 '닫기'로 교체
과제
요구사항
- 컴포넌트와 더불어 Property(Varient와 Text 속성)을 활용해볼것
실습 과정 및 결과
컴포넌트 제작. 공통적으로 자주 쓰이는 리스트 카드, 상단 페이지, 버튼, 아이콘 등을 컴포넌트로 설정
회고
컴포넌트를 만들고 속성을 부여하는 자체는 어렵지 않았지만, 작업을 진행하며 손이 조금 느리다고 느껴졌다. 평소에는 나름 손이 빠르다고 생각했는데, 생각보다 더 빠른 사람들이 많아서 살짝 놀랐다. 30명 중 7번째로 제출했지만, 예전처럼 상위권에 들지 못하자 내심 오기가 생겼다. 평소엔 항상 1-2등으로 제출했었는데 말이다.
물론, 손이 빠른 게 전부는 아니다. 중요한 건 이 기술을 활용해 문제를 얼마나 효과적으로 해결할 수 있는가다. 또한, 제출 시간이 늦어진 이유 중 하나는 팀원이 모르는 부분을 물어봐서 알려주느라 그랬던 것도 있다. 만약 그게 원인이라면 과제 제출이 늦어지는 건 전혀 문제가 되지 않는다고 생각한다. 제출 시간이 조금 늦더라도, 내가 아는 것을 공유함으로써 팀원이 성장에 도움을 받는다면 그게 더 가치 있는 일이다.
내게는 이 수업 시간을 통해 피그마 실력을 단순히 키우는 것보다, 우리 팀원들이 무리 없이 피그마를 잘 활용할 수 있도록 돕는 것이 더 중요하다. 우리 팀이 모두 잘 해내고, 함께 성장하는 모습이 정말 바라는 목표다. 팀 전체가 성장할 수 있다면, 그 과정에서 내가 기여했다는 사실만으로도 충분히 뿌듯함을 느낀다.
+번외
이전에 면접을 봤던 회사 2곳이 있는데 2-3주가 지나도록 연락이 오지 않는다. 심지어 한 회사는 나에게 커피챗 제안을 주고 면접을 꼭 보고싶다고 말했던 회사였는데...요새는 불합격 통보보다 무통보가 더 잔인하다는 걸 느낀다. 괜찮다고 다독이지만 마음이 힘든건 어쩔 수 없나보다. 그저 잊고 더 나은 내가 되기 위해 노력하며 더 좋은 기회를 잡을 수 있게 노력하는 수밖에 없다.
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
