24/03/07 학습일지 - 피그마 입문

park1006 2024. 3. 7. 19:59

3강 중반까지 들었는데 나눠쓰면 나중에 보기 애매할 것 같아서 3강 정리는 나중에 쓰고 일단 1강이랑 2강만 썼다.

컨트롤 + 엔터	글자 편집 완료
컨트롤 + d	복제

1강
피그마 가입하는 방법과 기능, 저장하고 추출하는 법을 배웠다. 사전캠프에서 들었던 강의와 비슷한 내용인데 좀 더 이론적인 말을 많이 해 줘서 복습겸 들음.

피그마에서 지원하는 최대 픽셀은 4096px. 이 이상의 사진은 열화되거나 잘림.
피그마 무료 프로그램에서는 팀 프로젝트를 1개밖에 생성할 수 없다.
모서리별로 곡률 주는 법: 스트로크와 동일. 500이 최대인 듯?
저장: 기본적으로 클라우드 파일로 저장되며, 변화가 생길 때마다(추측)자동 저장.
- 내 컴퓨터에 저장: 피그마 메뉴 → File → Save local copy.
- 진행상황 저장: 피그마 메뉴에서 → File → Show version history. 간단한 메모 가능.
  - 저장한 진행상황 확인: 피그마 메뉴 → File → Show version history.
    - view: 클릭.
    - 원하는 버전 불러오기: 우클릭해서 Restore this version.

2강
프레임, 그룹의 차이와 오토레이이아웃, 컨스트레인트. 프로그래밍 배울 적 배웠던 z-인덱스가 언급되어서 흥미로웠음.

프레임과 그룹의 차이
- 프레임: 프레임화하면 투명한 프레임 개체 안에 선택한 개체를 넣음
  - 리사이징: 프레임 안의 개체의 크기를 고정.
    - Fixed: 절대고정
    - Hug: 하위 개체에 상대고정
    - Fill: 상위 개체에 상대고정
- 그룹: 그룹화하면 선택한 개체를 묶음
- z-인덱스
  - 사용자가 인식하는 높낮이. 버츄얼 스튜디오 코드에서 쓰는 z-index 값과 같은 듯? 그림자 효과나 position: fixed;로 설정된 개체(스크롤하면 따라옴), 겹쳐지는 개체로 구분. ~~이거 써보려고 오랜만에 버츄얼 스튜디오 코드 켬~~
오토레이아웃: 개체를 패딩값으로 감싸는 것. 마진/패딩 설정 가능.
- 오토레이아웃 설정: 기본 패딩이 10씩 추가
- 프레임을 오토레이아웃으로 전환: 패딩 없이 프레임이 오토레이아웃으로 변환
- 정렬: 수직, 수평, 프레임의 크기를 벗어날 경우 줄바꿈
- 개체의 z-index 값이 높을수록 아래로 정렬됨.
컨스트레인트: 위치 고정. 프레임 안에 개체를 담았을 때 파란 선이 표시된 곳이 컨스트레인트가 걸린 쪽. 패널에서는 사각형 십자선 그거임 다른 말로 Anchor(앵커;닻)이라고도 함
- Left / Right / Top / Bottom :상위 프레임의 해당하는 방향을 기준으로 고정. 해당하는 방향을 기준으로 움직임 (크기조절 x)
- Left and Right / Top and Bottom : 상위 프레임의 좌우/상하를 기준으로 고정. 상하/좌우를 움직여야만 움직임(리사이징- Fill과 비슷)
- Center : 상위 프레임의 수직/수평 가운데를 기준으로 고정. (크기조절 x)
- Scale : 부모의 길이에 비례 (해당 방향을 늘리면 비례해서 늘어남)
정렬: 가장 가까운 개체를 기준으로 정렬. ex)왼쪽 정렬을 누르면 가장 왼쪽에 위치한 개체의 왼쪽 면으로 정렬됨
- 균등 분배: 여러 개체를 선택했을 때 오른쪽 아래에 만들어지는 파란 버튼. 정렬 목록 맨 오른쪽에도 있음. 알아서 간격맞춰 정리해 줌.
  - 수직정렬: 균등 분배에서 수직 간격만 맞춤
  - 수평정렬: 균등 분배에서 수평 간격만 맞춤

3강
심화 수업. 전 강의 까지는 딴짓하면서 봤는데 여기서부터는 집중함 기초 이론이 많아서 알아두면 좋을듯

디스플레이, 픽셀, 배수
- 해상도: 디스플레이 안에 들어가 있는 픽셀의 개수. 가로×세로로 표기
- 픽셀 배수: 1배수 디자인의 확대율을 결정.
  - 1배수 디자인: 일일히 기기마다 다른 해상도에 맞추어서 작업하지 않기 때문에 정하는 기준 사이즈. (피그마에서 지원하는 프레임 크기는 전부 1배수 디자인임)
    - 기기에 따라 자기 배율만큼 확대(업스케일) 또는 축소(다운스케일)해서 미세 조정 후 띄움 = 렌더링
    - 1배수=100%. 원본. 내가 디자인할 제품을 사용할 사람들이 가장 많이 쓰는 사이즈로 정함
  - 픽셀 배율 확인 사이트 → 배율=픽셀 배수
  - 아이폰: 375 * 812, 안드로이드: 360 * 800
- 분기점: 웹과 태블릿, 모바일의 크기를 가르는 지점
  - 일반적으로 데스크탑 > 1024px(분기점)< 태블릿 > 768px(분기점)< 모바일>(레이아웃이 깨지지 않는 최소 사이즈)
    - 다른 분기점을 정해도 되지만 정해진 화면이 아닌 타 디스플레이의 화면이 출력될 수 있음에 주의
  - 태블릿은 데탑/모바일 대비 이용자가 적은 반면 화면 세트를 하나 더 만들어야 하기에 데탑용으로 대체하기도 함
    - 만드는 서비스에 따라 고려해야 하는 경우도 존재 ex) 온라인 강의나 교육 같은 환경에서는 태블릿 사용량이 늘어남
- 그리드: 배치 가이드라인. 주로 세로 기둥을 쓰지만 가로 기둥을 놓기도 함 ~~가이드라인이라서 굳이 안 지켜도 되긴한데 화면이 어색할 때 쓰면 참고가 됨~~
  - 일반적인 데탑기준 칼럼 12개를 줄지어 늘어놓은 구조(12칼럼 그리드)
    - 칼럼: 그리드를 이루는 세로 기둥. 2/1 거터(마진) - 유닛(콘텐프가 들어가는 곳)- 2/1 거터
    - 12칼럼 그리드의 예시
      - 960 12 Column Grid : 유닛 60, 거터 20
        
        1200 12 Column Grid : 유닛 76, 거터 24
        
        1440 12 Column Grid 유닛 96, 거터 20