다크모드 적용시 문제가 있어 질문 드립니다.

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

모드를 활용한 다크모드 전환, 그리고 그 원리 배우기 - 파트 2

작성

안녕하세요! 먼저 강의를 잘 듣고 있고 자세하게 알려주셔서 감사합니다.

강의 듣다가 막히는 부분이 있어 질문 남깁니다.현재 [모드를 활용한 다크모드 전화, 그리고 그 원리 배우기- 파트 2] 를 듣고 있습니다.

베리어블에 다크모드 색상 값을 입력하고 Component UI 파일에서 Appearance로 모드를 전환하려는데 어떤 부분은 바뀌고 어떤 부분은 바뀌지 않는 현상이 있습니다. (사진첨부1)

아래 캡처(사진첨부2)처럼 used variables와 Foundation2025(라이브러리파일)로 나뉘어서 뜨는데 이것 때문일까요?

왜 강의와 다르게 두 개로 나뉘어서 뜨는지

잘 모르겠습니다.

답변 2

지식공유자

안녕하세요, j_blasem님.

이 문제는 주로 외부 베리어블을 가져다 쓴 경우에 발생합니다.

특히, 외부 베리어블에 모드(Mode) 가 설정되어 있는 경우에 자주 생기곤 합니다.

보통 모드를 변경했는데 값이 바뀌지 않는 상황은 해당 값이 제대로 적용되지 않았기 때문입니다. 제 개인적인 생각으로는 흰색이 #fff 값으로 바뀌었거나, 혹은 Foundation 2025 색상으로 덮어씌워져서 발생한 것으로 보입니다.

이 경우에는 결국 하나씩 확인하며 현재 사용하는 베리어블로 교체해주는 방법밖에 없습니다.

Apply Variable 플러그인 활용
이름이 동일하다면 로컬 베리어블로 자동 매칭하여 교체해줍니다.
(단, 색상 값만 적용되어 있을 경우에 한합니다.)
모드 탐색하기
페이지 → 섹션 → 컴포넌트 순서대로 내려가면서 모드를 확인해보세요.
이 과정에서 Foundation 2025 베리어블을 찾아낼 수 있습니다. 시간이 다소 걸리지만 확실한 방법입니다.
Selection Color 사용하기
색상을 변경할 때 Selection Color 기능을 사용하면 전체를 한 번에 교체할 수 있습니다.
예를 들어 Foundation 2025 베리어블을 찾았는데 해당 라이브러리가 연결되어 있지 않다면, 색상을 직접 검색해도 찾을 수 없습니다. 이 경우는 하나씩 로컬 베리어블 색상으로 다시 연결해주셔야 합니다.

시도해보시고 알려주세요. 감사합니다.

안녕하세요, 인프런 AI 인턴입니다. j_blasem님께서 질문하신 다크모드 적용 시 문제와 관련하여 몇 가지 정보를 준비했습니다.

다크 모드 변경 문제:
- 일부 요소가 다크 모드로 변경되지 않는 이유는 베리어블 설정이 중복되거나 제대로 적용되지 않았을 수 있습니다. 베리어블의 범위(scope)를 확인하여, 적용된 컴포넌트가 올바른 모드에 맞춰 설정되어 있는지 다시 확인해 보세요.
Used variables와 Foundation2025:
- Used variables는 현재 문서에서 사용하는 베리어블을 의미하며, Foundation2025는 라이브러리에서 가져온 것일 수 있습니다.
- 베리어블이 두 개로 나뉜 이유는 파일 또는 컴포넌트의 전역 설정이 라이브러리에 저장된 기본값과 다르기 때문일 수 있습니다. 일관성이 없으면 각 요소가 독립적으로 동작할 수 있습니다.

다크모드와 라이트모드 전환 문제가 발생하는 경우 관련 답변
- 해당 답변에서는 모드 전환 시 텍스트 색상이 바뀌지 않는 문제의 해결 방법을 설명하고 있습니다. 컴포넌트의 상속 및 변수 설정의 중요성을 다루고 있습니다.

위의 정보를 바탕으로 설정을 한번 더 점검해보시는 것을 추천드립니다. 문제가 지속되거나 다른 질문이 있으시면 언제든지 새롭게 문의해 주세요.

저는 질문자님의 이해를 돕고자 관련 정보를 제공해드리고 있습니다. 현재 베타 기능이므로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 도움이 필요하시면, 지식공유자께서 곧 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변