전체 글 15

Figma로 반응형 디자인 만들기 - Constraints, Auto Layout

오즈코딩스쿨의 13일차 수업 리뷰아직 피그마 기초를 다루는 시간이다! Auto Layout 사용해서 반응형 디자인 실습해보기 새롭게 배운 점 (from Grid 실습)- 이미지 내부 설정이 Crop 이 아닌 Fill로 되어 있어야 반응형에 들어갔을 때 자동으로 정렬이 된다. - 그리드에서 오른쪽의 콘텐츠 자동정렬을 해제해야 원하는 대로 디자인을 배열할 수 있다.- 최대 / 최소 넓이를 지정했을 때 반응 새롭게 배운 점 (from Auto layout 실습)- 내부의 Gap은 Auto로, 프레임은 Fill(가로의 경우 w를 Fill, 세로의 경우 h을 fill)로 설정해야 반응형을 했을 때 제대로 늘어난다. Figma Constraints프레임 크기가 달라질 때, 레이어가 어느 방향을 기준으로 유지되..

공부 2026.06.16

더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초

오즈코딩스쿨의 11~12일차 리뷰를 작성해보고자 한다. 11일차 -- IA/유저플로우/와이어플로우 -- Grid & Spacing Rule-- 와이어프레임의 역할 더블 다이아몬드 프로세스 현업에서 가장 많이 쓰는 더블 다이아몬드 프로세스를 배우면서 시작했다.이전에 리메인커리어에서 프로젝트를 진행했을 때에도, 동일한 방식으로 개인 프로젝트를 진행해본 경험이 있다. Discover(발견) -- 데스크리서치에 해당한다. [발산] 방안) SWOT, BM 분석, 경쟁사 조사, 시장현황 파악, VOC(Voice of Customers) 수집, 오픈 서베이, 기사 자료, 정량(Surver), 정성(IDI) Define(도출) -- 문제상황 > 인사이트를 도출한다. [수렴] 방안) 핵심타겟 정의 / Per..

공부 2026.06.15

UI 화면 요소 종류와 이름

오즈코딩스쿨의 10일차 수업 중 배웠던 UI 화면 요소 관련 내용만 따로 정리해보고자 한다. 탐색 & 이동 UI사용자가 '지금 어디에 있는지, 다음에 어디로 갈지' 이해하게 만드는 요소들 브레드크럼-- 현재 위치를 단계적으로 이해하게 만드는 경로 표시 요소 페이지네이션-- 긴 목록을 여러 페이지로 나눠서 보여줄 때, 현재 위치와 다음 이동 범위를 알려주는 요소 인피니티 스크롤-- 아래로 스크롤할수록 콘텐츠가 계속 자동으로 로드되는 방식 메뉴-- 여러 기능을 모아 보여주는 메뉴 아이콘 패턴 (벤토 메뉴, 햄버거 메뉴, 미트볼 메뉴 ... ) 입력 & 선택 UI 사용자가 입력, 선택, 상태 변경을 하는 interaction 요소 검색 필드 = Search Field (서치 필드)-- 내비게이션이 길어..

공부 2026.06.11