오즈코딩스쿨의 13일차 수업 리뷰
아직 피그마 기초를 다루는 시간이다!
Auto Layout 사용해서 반응형 디자인 실습해보기
새롭게 배운 점 (from Grid 실습)
- 이미지 내부 설정이 Crop 이 아닌 Fill로 되어 있어야 반응형에 들어갔을 때 자동으로 정렬이 된다.
- 그리드에서 오른쪽의 콘텐츠 자동정렬을 해제해야 원하는 대로 디자인을 배열할 수 있다.
- 최대 / 최소 넓이를 지정했을 때 반응
새롭게 배운 점 (from Auto layout 실습)
- 내부의 Gap은 Auto로, 프레임은 Fill(가로의 경우 w를 Fill, 세로의 경우 h을 fill)로 설정해야 반응형을 했을 때 제대로 늘어난다.
Figma Constraints
프레임 크기가 달라질 때, 레이어가 어느 방향을 기준으로 유지되거나 늘어날지 정리하는 설정
어느 벽에 딱 붙어있을지 정하는 규칙!
주요 장점
- 작업 효율 : 화면 별로 디자인을 그릴 필요가 없다.
- 오류 방지 : 화면을 늘려도 요소가 겹치거나 찌그러지는 오류 방지
- 소통 명확 : 개발자에게 전달할 배치 규칙이 파일에 그대로 담긴다.
| 항목 | 설명 | 사용 예시 |
| Left or Right | 왼/오 가장자리에 고정 | 로고, 햄버거 메뉴, 앱 아이콘, 프로필 아이콘, 설정 등 |
| Left + Right | 가로 방향으로 늘어난다. | 검색창, 콘텐츠 영역, 입력 필드 |
| Center | 중앙 고정 | 제목, 로고, 메인 콘텐츠 등 |
| Top or Bottom | 위/아래 가장자리에 고정 | 위) 헤더, 상단 바, 타이틀 영역 / 아래) 하단 탭바, 버튼, 푸터 |
| Top & Bottom | 세로 방향으로 늘어난다. | 스크롤 가능한 콘텐츠, 세로 리스트, 사이드바 |
| Scale | 바깥 레이어 비율에 맞춰 크기가 달라진다. | 이미지 영역, 지도, 반응형 배너 |
새롭게 배운 점
- 실습하면서 매체들을 어떻게 Constraint 하는지 배웠다.
- 전체를 frame으로 씌워야 한다. (rectangle 만들어서 X)
- 이미지를 비율에 맞게 조정하려면 상하좌우 모두 Scale을 적용해야 한다.
- 본문 텍스트는 Left / Top으로 조정을 하는 게 일반적이다.
막히거나 어려웠던 부분
- 적절한 min/max width 값을 감 잡는 것이 어렵다. 특히 가로 정렬을 했을 때, 의도했던 미관적인 배치를 위한 width 값의 조정을 하려면 감을 많이 잡아봐야 할 거 같다.
반응형과 적응형 레이아웃
반응형
- 하나의 코드로 모든 기기에 대응
- 해상도에 맞는 적절한 사이즈의 화면
- 모든 기기에 대응해야 하기 때문에 기기별 웹사이트가 적용되는 방식에 통제가 어려울 수 있다.
브레이크 포인트 (Break point) : 레이아웃이 변하는 특정 지점으로, *미디어 쿼리를 사용해 디자인이 전환되게 설정
- *미디어 쿼리: 화면 크기나 해상도 등 조건에 따라 다른 스타일을 적용하는 CSS 기술
- 모바일 : 320 ~ 767 / 태블릿 : 768 ~ 1023 / 데스크탑 : 1024 ~ (pixel)
브레이크 포인트 지정 방법
- 해상도 점유율의 통계 수치를 확인후, 점유율이 가장 높은 해상도 선택 (Statcounter)
- 예시 사이트: Apple / 29cm / wadiz / toss / youtube / starbucks
반응형 디자인을 하는 이유
1. 디바이스의 유연한 대응
2. 유지 보수의 효율성
3. SEO(검색 엔진 최적화)에 유리 -- 유입 경로 분산을 방지 (단일 URL 사용, 적응형의 경우 /m이 달라진다.)
4. 일관된 UX
5. 비용 및 시간 절감
적응형
- 각 해상도에 맞춘 화면을 개별로 제작
- 기기별 최적화된 맞춤 디자인과 맞춤 경험 제공
- 초기 기획과 디자인이 편리
- 로딩 속도가 빠르다.
- 기기별로 화면을 따로 만들어야 해서 유지 보수에 불리
- 모든 기기에 대응이 어렵다.
+) 디자이너, 개발자 협업 프로세스
1. ASIS TOBE 기획 : to-be 기획 단계에서 디자이너가 개선방향 정의, 구현 가능 여부를 함께 검토
2. 경쟁사 및 디자인 레퍼런스 수집 -- 디자이너
3. IA 설계: IA 설계를 공유, GNB 기준으로 구성된 sub category를 개발자와 함께 확인
* GNB : Global Navigation Bar
* sub category : GNB의 메인 메뉴를 클릭하거나 마우스를 올렸을 때 펼쳐지는 하위 메뉴/세부 분류
4. 분기점 협의 및 화면 설계 : 개발자와 breakpoint 기준을 협의한 후, 화면 고도화 진행 /
5. QA(Quality Assurance) : 배포전, 해상도별 레이아웃이 정상적으로 동작하는지 / 인터랙션이 의도대로 구현되었는지 검수
실습 화면
'공부' 카테고리의 다른 글
| 컴포넌트와 프로퍼티, 인스턴스 스왑 (0) | 2026.06.23 |
|---|---|
| 디자인 요소, 디자인 시스템 Case Study (0) | 2026.06.18 |
| 더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초 (0) | 2026.06.15 |
| UI 화면 요소 종류와 이름 (0) | 2026.06.11 |
| 디자인 기초 수업을 마무리하며 _ Class Review (0) | 2026.06.09 |