💡Design Mode
디자인 모드는 화면을 디자인하기에 최적화된 모드로, 다양한 UI 요소를 설계하고 비주얼 속성을 정의하는 데 특화되어 있다.
컬러 값, 크기, 위치 등의 속성을 조정하여 레이아웃 디자인을 변경할 수 있으며, 추가적인 작업을 통해 고도화된 디자인을 만들 수 있다.
💡Dev Mode
개발 모드는 디자인된 화면의 코드를 확인하는 데 특화되어 있다.
Dev Mode를 통해 개발자들이 디자인을 확인하고 버튼의 위치, 글꼴 크기 등을 쉽게 확인할 수 있도록 지원하고 있다.
Shift + D 단축키로 간편하게 Design Mode와 Dev Mode를 전환할 수 있다.
Dev Mode 시작하기
오른쪽 상단의 'Dev Mode' 버튼을 클릭한다. 그러면 Welcome to Deve Mode라는 글과 함께 Dev Mode에 대한 간단한 튜토리얼을 보여준다.
프로젝트 방향성 선택
Next 버튼을 누르면 설계하고 있는 화면을 어떤 플랫폼을 이용해서 개발하는지 선택한다.
진행하는 프로젝트의 Platform이 Web, ios, android인지에 따라서 화면 구성이 달라지기 때문에 디자이너가 단독적으로 선택하기보다 개발자와 협의하여 방향성을 잡고 결정해야 한다.
그리고 Unit 단위를 px과 rem 중에서 선택하도록 한다. px은 절댓값이며, rem은 기본 글꼴 크기를 기준으로 하는 상대값이다.
[CSS] 텍스트 속성, 웹 폰트, 수치 표현법
🍁텍스트 속성 한글 Ipsum (간세네) 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적
isaac-christian.tistory.com
수치 표현법에 대한 내용은 위 글을 참고한다.
수치 표현법
HTML 수치 표현법
1. 숫자(px, 문자수, 셀병합 크기)
2. 백분율(%)
CSS 수치 표현법
단위를 생략하면 동작하지 않기 때문에 수치 데이터는 반드시 단위 표기를 해야 한다.
CSS 수치 표현법은 HTML 수치 표현법보다도 훨씬 많은 단위를 지원한다. 그러나 모든 단위를 사용하지 않으며, 주로 pt, px, em, rem, % 단위를 사용한다.
1. pt: 포인트(글꼴에 사용), 절댓값, 1/72인치
2. px: 픽셀(모든 분야에서 사용(크기, 여백, 위치, 글꼴 등)), 절댓값
3. em: 기본 글꼴 크기를 기준으로 하는 상대값(%), 알파벳 대문자 M의 높이를 100%으로 하는 상대값, 상속받음 (부모 글꼴 크기를 100%으로 하는 상대값)
4. rem: 기본 글꼴 크기를 기준으로 하는 상대값(%), 알파벳 대문자 M의 높이를 100%으로 하는 상대값, 상속받지 않음, 부모와 상관없이 브라우저의 기본 글꼴 크기를 100%으로 하는 상대값
5. %: 백분율(크기, 여백, 위치, 정렬 등..), 상대값, 부모의 크기를 기준으로 하는 상대값
6. ex: 알파벳 소문자 x의 높이를 100%으로 하는 상대값
7. mm: 밀리미터 (인쇄용도)
8. cm: 센티미터 (인쇄용도)
9. in: 인치
10. pc: 파이카 (12pt), 절댓값
11. 기타 등등..
Dev Mode 활용
Dev Mode로 전환한 결과 디자인으로 설계해 놓은 것을 바로 css 코드로 변환해서 보여주는 것을 확인할 수 있다.
마우스를 박스 위에 올려 보면 디자인 모드에서는 보이지 않았던 padding이 설정된 수치도 보인다.
Dev Mode를 활용하면 이렇듯 정확하게 수치화해서 개발할 수 있기 때문에 디자이너가 의도한 대로 플랫폼을 개발할 수 있다.
🔎Comment
Add comment로 코멘트를 추가하여 디자인을 설명하거나 피드백을 남길 수 있다. 또한 팀원을 언급하여 불러오는 것도 가능하다.
Design Mode와 Dev Mode에서 모두 이용 가능하다.
참고자료
피그마 입문 A to Z 부트캠프, Rena, MetaCode, 2024.01.27.
