inflearn logo
강의

講義

知識共有

Figma MCP × AI x Vibe Coding 4時間で完成させるレスポンシブWebポートフォリオ

[Figma Design] レスポンシブデザイン-Tablet & Mobile 2次修正

변수 설정 시에 질문입니다.

1

ohrok

投稿した質問数 1

0

안녕하세요, J.영님.

강의 잘 수강하고 있습니다, 감사합니다.

 

일전에 변수 설정을 올려주셔서 모두 적용하고 태블릿,모바일버전까지 만들었습니다.

이 부분에서 궁금한 점이 생겼는데,

 

모바일버전까지는 직접 다 손으로 디자인하고, 해당 수치를 변수로 등록하나요 ?

 

예를 들어 이 강의에서 언급된 'desktop-section-skill' 에서 line height가 데스크탑/태블릿/모바일 이 다 다른데, 이 부분은 결국 다 디자인 해보고 변수 등록 하는게 아닌가 싶어서요.

 

 

아니면 대략적으로 얼마나 줄어든다와 같은 공식이 있나요 ?

저는 J.영님이 설정하라는대로만 해서 모바일로 편하게 바꿨는데, 제 작업을 할때는 오토레이아웃으로 모바일까지 다 설정해두고 그 다음에서야 변수 등록을 하는게 맞나 싶어서 확인차 질문 남깁니다 !

HTML/CSS figma 포트폴리오 인공지능(ai) 바이브코딩

回答 1

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 오상훈/디자인컨버전스학부님.

먼저 강의를 잘 수강해주셔서 감사합니다! 질문하신 내용에 대한 답변을 드리겠습니다.

반응형 디자인에서의 변수 설정은 특히 다양한 디바이스에 따라 디자인을 최적화하는 중요한 작업입니다. 일반적으로, 각 기기(데스크탑, 태블릿, 모바일)에 맞춘 디자인은 다음과 같은 방법으로 접근할 수 있습니다:

  1. 디바이스별 디자인 최적화: 각 디바이스에서 다르게 보이는 포맷 사항(예: line-height, font-size, margin 등)은 실제 특정 디바이스 환경에서 최적의 가독성과 사용성을 고려하여 수치를 설정합니다. 이것은 별다른 최적화 공식이 있는 것보다는, 대상 디바이스에 맞춰 가장 자연스럽고 편리하다고 느끼는 값을 설정하는 것이 일반적입니다.

  2. Auto Layout 활용: Figma에서는 Auto Layout을 통해 특정 요소들이 다양한 사이즈에 맞춰 자동으로 정렬되도록 설정할 수 있습니다. 이렇게 하면, 디자인 요소들이 변화하는 디바이스 크기에 자동으로 반응하여 적절히 배치됩니다.

  3. 변수 등록: 최적의 값을 발견하셨다면, 이를 변수로 등록해 다른 프로젝트에서도 재사용할 수 있도록 하는 것이 바람직합니다. 이를 통해 일관성 있는 디자인 시스템을 유지할 수 있습니다.

아래의 작성된 유사 질문 내용을 참고하시면 작업 시 도움이 될 것입니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

live server, korean 을 검색해도 아무것도 나오지 않음

0

7

0

퍼블릭시티를 ai agent 제미나이로 대채

0

14

2

섹션2-18

0

13

2

텔레그램 User Info 채널이 없어요.

0

11

0

템플릿 생성

0

7

0

커서질문

0

15

1

SUPABASE에서 AOI 선택여부

0

14

2

클로드 코드 터미널 사용시 git, git 허브 활용 법

0

17

1

mcp.json파일 생성 X

0

18

2

강의 내용이 정신이없네요 ;;

0

33

2

figma 파일을 받을 수가 없어요

0

56

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

40

1

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

86

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

75

2

노션에 20.Contact가 없어요

0

47

2

Json 플러그인 사용시 variable collection 없음

0

55

2

배리어블 목록 없음

0

96

3

Token 등록 방법 문의

0

46

1

노션 25 인터렉션 구현 파트 안 보입니다!

0

64

2

figma variable 반응형 디자인 결과물 공란

0

103

2

로고이미지가없는데요..

0

77

2

피그마 AI기능 관려

0

99

2

hero-img 이미지

0

99

1

폰트확인 부탁 드립니다.

0

89

2