inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Từ thiết kế luồng người dùng đến hiện thực hóa bản mẫu (prototype)

Tạo màn hình chi tiết sản phẩm (Sử dụng Conditional)

24강 상품 상세화면 실습 컨디셔널 질문

Đã giải quyết

23

solinkim320

4 câu hỏi đã được viết

0

안녕하세요,

 

24강 컨디셔널 설정 중 클릭한 라디오 버튼을 true로 변경하는 조건문을 강사님께서 아래와 같이 별도로 분리하셨는데, 아래 두번째 스크린샷처럼 모든 라디오버튼을 false로 변경하는 조건문 다음에 가장 마지막으로 일어나게끔 포함시켜도 상관 없는걸까요?

스크린샷 2026-04-19 오후 6.51.51.png.webp

 

스크린샷 2026-04-19 오후 6.52.03.png.webp

 

감사합니다!

프로토타이핑 figma figma-variable conditional 컨디셔널 조건문 피그마

Câu trả lời 2

0

moment

안녕하세요, 질문 남겨주셔서 감사합니다 :)

말씀해주신 아이디어/설정 방식 자체는 충분히 좋은 시도이지만,

지금 글로만 봐서는 어떤 구조와 컨디셔널 로직을 의도하신 건지 정확히 파악하기가 어려워서요.

가능하시다면

• 어떤 상태에서 어떤 요소가 보였다/숨겨졌다 하면 좋을지(원하시는 흐름),

• 현재 설정해두신 컨디셔널/변수 스크린샷 또는 예시 파일

을 조금만 더 자세히 공유해주시면, 그걸 기준으로 더 구체적으로 어떻게 설정하시면 좋을지 안내드리겠습니다.

0

solinkim320

안녕하세요,

 

신속한 답변 감사드립니다. 남겨주신 답변을 확인 후 아래 자료와 같이 각 스크린샷의 차이점을 붉은색 박스로 표시하였음을 안내드립니다.

 

자료1. 'Change to State = True'가 다음 문단(?)으로 분리된 상황

자료2. 'Change to State = True'가 첫 조건문에 함께 포함된 상황

 

혹시 위 2가지 상황이 결과에 영향을 줄지, 혹은 두 경우 모두 동일한 결과를 보여주는지 궁금하여 질문을 올리게되었습니다.

 

감사합니다!

 

스크린샷 2026-04-19 오후 6.51.51.png.webp

 

스크린샷 2026-04-19 오후 6.52.03.png.webp

 

1

moment

안녕하세요, 추가 자료 공유 감사합니다 :)

보내주신 두 스크린샷(자료1: ‘Change to State = True’를 별도 조건문으로 분리한 경우 / 자료2: 첫 조건문에 함께 포함한 경우)을 비교해보면, 두 경우 모두 최종 결과는 동일하게 동작합니다.

이유를 간단히 정리드리면:

• 피그마의 컨디셔널은 위에서 아래로 순차적으로 실행됩니다.

• 자료2처럼 첫 조건문 안에 Set Section01/OptionXX = falseChange to State = True를 함께 넣어도, 해당 옵션이 클릭된 상황에서 먼저 모든 옵션이 false로 초기화되고 난 뒤 state가 true로 바뀌기 때문에 결과적으로 자료1과 같은 상태가 됩니다.

• 자료1처럼 분리한 이유는 가독성과 유지보수성 때문입니다. “초기화 로직”과 “상태 전환 로직”을 나눠두면 나중에 조건이 추가되거나 변경될 때 훨씬 이해하기 쉽습니다.

정리하면, 동작 결과는 동일하지만 로직이 복잡해질수록 자료1처럼 역할별로 분리해두시는 편을 권장드립니다

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 두둥님,

24강 컨디셔널 설정에 대한 질문 감사합니다. 피그마나 기타 프로토타이핑 툴에서 조건문 로직은 매우 중요하며, 이를 어떻게 구현하느냐에 따라 사용자 경험에 큰 영향을 미칠 수 있습니다.

컨디셔널 설정 설명:

지금 질문 주신 내용은 라디오 버튼과 관련된 조건문 설정입니다. 아래 두 가지로 나눌 수 있습니다:

  1. 모든 옵션 초기화:

    • 사용자가 클릭한 옵션을 제외한 모든 라디오 버튼 옵션(Option01 ~ Option04)을 false로 설정합니다. 이는 라디오 버튼의 일반적인 특성상 하나의 옵션만 선택되어야 하기에 필요한 과정입니다.
  2. 선택 옵션 설정:

    • 선택된 라디오 버튼이 true로 설정됩니다.
    • 이 조건문은 사용자가 특정 옵션을 선택했을 때를 감지하여 해당 옵션의 상태를 true로 바꿔주는 동작입니다.

질문에 대한 답변:

  • 모든 라디오 버튼을 false로 초기화한 후 바로 true로 설정해도 되는지:

사용자가 특정 옵션을 선택했을 때, 현재 선택된 옵션을 false로 바꾸고나서 새로 선택된 옵션을 true로 설정하는 것은 일반적인 구현 방법입니다. 이 로직은 사용자 경험을 최적화하기 위함입니다.

  • 로직 순서:
    • 라디오 버튼은 특성상 하나의 옵션만 선택 가능한 UI 요소이므로, 선택된 라디오 버튼을 true로 설정하기 전에 다른 모든 라디오 버튼을 false로 설정하고, 선택된 것을 true로 바꾸는 것은 명확한 흐름입니다.
    • 단, 원하는 결과가 다르거나 특별한 사례에 대해서는 예외적으로 로직을 분리할 수도 있습니다. 하지만, 현재의 흐름에서 큰 문제는 없을 것으로 보입니다.

추가적인 참고자료

  • 피그마의 인터랙션 및 조건문 설정은 실시간으로 결과를 미리 보면서 테스트할 수 있는 기능이 있습니다. 이를 통해 쉽게 로직을 점검하고 수정할 수 있는 장점이 있으니, 상황에 맞춰 조정하시길 권장합니다.

아래의 링크들을 통해 강사님의 설명을 참고해보시면 도움이 될 것 같습니다:
- 피그마에서의 인터랙션 가이드
- 강의자료에서 제공된 PDF 설계문서에서 저작권 및 자세한 기능 사용법을 확인해주세요.

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

네이티브 색상변경

0

4

1

채팅 UI 추가 속성 설정 질문

0

15

1

배리어블 Value에 관해 질문있습니다.

0

23

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

26

1

Navigation Mobile 토글 베리어블이 안됩니당

1

29

2

실습파일

0

16

2

23강 캘린더 화면 실습 강의 2가지 질문

0

24

1

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

27

1

17~20강 강의에서 활용하신 노션 자료 또한 공유 가능할까요?

0

34

1

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

0

33

2

신규 업데이트 내용

0

27

2

'Scroll To' 프로토타입 상세설정 'Offset' 플러스와 마이너스 설정 기준이 궁금합니다!

0

28

2

예제 파일 오류

0

28

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

41

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

52

2

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

0

57

2

예시파일 불일치

0

38

2

프레임 / 사각형

0

31

1

와이어 프레임,화면 정의서를 작성하려면 Figma 강의를 별도로 들어야 할까요??

1

41

2

테이블 만들기 질문

0

51

1

next step?

1

67

1

노션 내용 공유가 가능할까요? ㅜㅜ

0

55

1

안녕하세요! 강의잘 들었습니다.

0

68

2

베리어블 에듀 계정

0

62

1