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

投稿した質問数 1

0

오상훈/디자인컨버전스학부
상훈님 안녕하세요? 먼저 본 강의를 수강해 주셔서 진심으로 감사드립니다.

모바일버전까지는 직접 다 손으로 디자인하고, 해당 수치를 변수로 등록하나요 ?
-> 강의 촬영 당시만 해도, 한땀한땀 손으로 다 변수 등록을 했는데요..
요즘 AI는 Figma디자인이 완성된 상태에서 프레임을 선택하고, "변수등록해" "디자인 스타일 등록해" 라고 요청만 해도 완벽하게 등록을 해버립니다^^!!

또한,
현재 시점 기준으로 AI는 반응형 코딩을 아주 잘합니다
기본 Desktop모드만 Vibe Coding시켜도 알아서 척척 반응형까지 완성합니다.

하지만 여기에는 디자인마다 차이가 있는데요..
AI는 Grid레이아웃이나, Flex레이아웃은 아주 아주 잘 만들지만
말씀하신 부분처럼 position을 사용한 디자인의 경우 제대로 구현을 하지 못해
일일이 위치를 찍어가며 수정이 필요합니다.

AI가 갈수록 발전해서 하루하루 달라지고 있긴 하지만
postion을 사용한 디자인의 경우 높이 값도 상실되고, 브라우저 너비에 따라 위칫값이 유동적이기 때문에 아직은 AI가 제대로 구현하지 못하는 것이 현실이기에
이부분은 직접 사용자의 개입이 필요합니다.

궁금하신 점이 해소되셨을까요?^^

또 열공하시고 궁금하신점 있으시면 언제든 질문주세요
감사합니다.
오늘 하루도 좋은 하루되세요^^

J.영드림

0

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

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

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

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

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

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

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

• figma variable 연결 결과물에 url이 없는데, 어디서 받을 수 있을까요?: 이 게시물에서는 변수를 효율적으로 등록하는 방법과 관련된 다양한 팁과 경험이 공유되고 있습니다.
  

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