inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

사용자 흐름 설계부터 프로토타입 구현까지

상품 상세 화면 제작 (Conditional 활용)

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

해결된 질문

23

두둥

작성한 질문수 4

0

안녕하세요,

 

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

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

 

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

 

감사합니다!

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

답변 2

0

moment

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

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

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

가능하시다면

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

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

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

0

두둥

안녕하세요,

 

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

 

자료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

인프런 AI 인턴

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

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

컨디셔널 설정 설명:

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

  1. 모든 옵션 초기화:

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

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

질문에 대한 답변:

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

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

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

추가적인 참고자료

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

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

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

네이티브 색상변경

0

3

1

채팅 UI 추가 속성 설정 질문

0

14

1

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

0

22

0

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

0

26

1

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

1

28

2

실습파일

0

16

2

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

0

24

1

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

0

27

1

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

0

34

1

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

0

30

2

신규 업데이트 내용

0

27

2

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

0

28

2

예제 파일 오류

0

28

1

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

0

41

2

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

0

51

2

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

0

55

2

예시파일 불일치

0

37

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