피그마 수업 3일차!
난 이미 쓸줄 알았기에 다시 돌아보는 거라 꽤 흥미롭다고 생각했는데
정말 처음부터 하는 사람들은 많이 어렵다고 생각하신 것 같다.
강의 중간에 너무 빠르다는 사람들과 너무 느려서 다른 과제를 하고싶다 라는 의견들이 충돌하기 시작했...
강사님이 많이 고민하시는 것 같아서 안쓰러우셨다..이게 참..중간을 찾기가 어렵긴 하징...ㅠㅠ
오늘의 수업 요약
- UI디자인을 할땐 기기의 가변성도 고려해야된다
- 그리드시스템을 꼭 활용하자
- Variants / Boolean / Instant swap 실습
디자인의 가변성
기기환경의 다양성
→ 다양한 크기의 화면에서도 동일한 정보를 잘 전달해야 함
| PC | 태블릿 | 스마트폰 |
| 마우스 커서 정밀 조작 | 터치 인터렉션 | 손가락 터치 최적화 |
| 1200px ~ 화면폭 (화면폭은 1920으로 가는데 콘텐츠는 1200으로 잡는 경우도 있음) |
768 ~ 1024px 화면 폭 | 320 ~ 480px 화면 폭 |
| 넓은화면, 높은 해상도 | 중간 크기 화면 | 작은 세로형 화면 |
→ 화면 대응 기술 : 어떤 기기로 보더라도 정보를 잘 전달하고 편리하게 사용할 수 있도록 디자인해야 함
반응형 디자인
→ 화면 크기에 따라 유동적으로 레이아웃이 변하는 방식과 그 장점
-> 단일 소스 유지보수 하나의 디자인 파일만 관리하면 되서 수정,업데이트 효율적
| 일관된 사용자 경험 | 사용자가 어느 기기에서든 동일한 디자인을 경험 가능 |
| SEO 친화적 | 하나의 URL로 모든 기기 대응이 가능해 검색엔진에 유리 |
| 개발 시간 단축 | 기기별 별도 버전 테스트를 안해도 됨 |
| 미래 기기 대응 | 새로운 크기가 출시되도 유연한 레이아웃 덕분에 자동 대응 가능 |
| 상대적 단위 활용 | %, em, rem, vw 등의 상대 단위를 사용해 유연하게 크기가 조절되는 레이아웃 구현 |
그리드 시스템
→ 디자인 화면 위에 보이지 않게 깔린 격자 무늬 규칙
→ 일반적으로 12개 칼럼을 가장 많이 사용
→ 한 요소가 여러 칼럼을 차지할 수 있어서 다양한 너비의 콘텐츠 배치 가능
그리드 구성
- 칼럼
: 콘텐츠가 실제로 들어가는 수직 공간 - 거터
: 콘텐츠 간 혼합을 방지하고 가독성을 높힘
: 칼럼과 칼럼 사이의 간격 - 마진
: 안정감과 균형 제공
: 이건 꼭 지켜서 디자인 해야됨
: 화면 가장자리와 콘텐츠 사이의 여백
반응형에서의 그리드
| 모바일 | 태블릿 | PC |
| 4개 칼럼 | 6개 칼럼 | 12개 칼럼 |
https://designbase.co.kr/grid-calculator/
반응형 웹 그리드 시스템 계산기 | 디자인베이스
반응형 웹디자인 시에 최적화된 그리드를 찾아보세요. Desktop, Tablet, Mobile 등의 컬럼수, 거터, 마진 등의 값을 통해 정수로 떨어지는 값을 찾는 것도 가능합니다. 미리보기를 통해 여러분이 작성
designbase.co.kr
→ 여기서 최대폭 설정하면 그리드를 알 수 있음
→ 그리드에 적용할땐 피그마에서 그리드 [type : center] 로 두고 거터와 칼럼 사이즈만 조절
** 태블릿의 경우 가로사이즈
→ 코딩할때 가로사이즈까지 생각해서 개발을 함
→ 개발자분들한테 몇사이즈부터 몇사이즈까지는 태블릿 그리드로 해달라~ 라고 요청
→ 유저에 따라 그리드를 설정할 수 있도록 유연한 사고가 필요함
Variants
→ 하나의 컴포넌트의 여러 상태를 담는 강력한 기능
- 버튼 컴포넌트(마스터) → Default / Hover / Disabel 상태 이렇게 만들 수 있음
* Frame 과 selection의 차이점
| Frame | Selection |
| 프레임 사이즈에 따라 위치 이동 | 늘려도 이동하지 않음 |
| 프레임은 디자인 용도 | 전체적인 페이지 화면 묶어서 넣어두기 |
| 프레임은 멀리가면 이름이 안보임 | 섹션은 멀리가도 이름이 보임 |
Booleans
→ 어떤땐 필요하고 어떤 땐 필요하지 않을때 필요한 기능
→ 여러버전을 하나의 variants로 관리가능한 기능!!!
Instant swap
→ 이미지를 하나하나 다 바꿔야할때 사용
오늘의 과제는 수업시간 내 배운 내용을 바로바로 실습하면서 복습해보는 거였다.
그리드 시스템이랑 Variants, Booleans, Instant Swap 이렇게 해보는 거였는데
이렇게 차근차근 실습을 해보았다.
Variants 말고 다른 기능은 처음본 기능이라 선생님이 보여주실때 동시에 따라만들어봤는데 오 너무 재밌었다.
같은 유형의 기능을 빼고 하는게 너무 귀찮았는데 boolean을 쓰면 여러 유형을 만들 수 있으니까 진짜 편했다.
인스턴트 스왑은 좀 해봐야 알겠지만..기능은 알겠는데 뭔가 어디다가 써야하지? 라는걸 아직 모르겟어서 현업에서 써봐야 알듯한?
그리고 시간이 남은 사람은 배운 기능을 이용해서 클론 앱 디자인을 해보라고 하셔서
난 nol티켓을 따라해보았다.
탭이나 리스트에 오토레이아웃을 걸고 그리고 오픈예정 콘텐츠 이미지에 인스턴트 스왑을 쓰니 쉽게 이미지가 바껴서 이럴때 쓰면 편하긴 하겠군~ 이란 생각도 들고ㅋㅋㅋ
앱 클론 디자인을 하다가 조교님과 1:1면담 시간을 가졌다!
전체 학생을 대상으로 지금까지의 수업은 어땠는지나 불만사항이나 개선점같은걸 물어보는 시간이었다.
난 추가 학습반에 대한 고민을 얘기드렸고 조교님의 얘기를 듣다보니
딱히 고민안해도 되는 부분이었구나 라는 생각이 들어서 고대로 심화반으로~~~
그래도 개선점을 말씀드리면 바로바로 반영하려는 강사님과 조교님, 러닝코치님, 운영매니저이 계셔서 강의가 좋은 방향으로 흘러가고 있다고 생각한다!
다들 감사합니다~~~
'OZ코딩스쿨_프로덕트 디자이너 부트캠프' 카테고리의 다른 글
| DAY12_피그마 킵고잉 베이붸(블로그밀리지말자..힝) (0) | 2025.12.15 |
|---|---|
| DAY11_피그마 심화고고링!222(사실 어제가 1이어따) (0) | 2025.12.15 |
| DAY9_배워보자! 피그마 2탄! 도돈 (0) | 2025.12.14 |
| DAY8_피그마 걸음마 응앵 (0) | 2025.12.10 |
| DAY7_서비스 디자인 기획이래..오모..!! (1) | 2025.12.10 |