디자인 시스템 관련해서 문의드립니다.

Flutter 앱 개발 실전

해결된 질문

작성

수정됨

안녕하세요 선생님,

저번에 카톡으로 질문 드렸었던 플러터하고 싶은 1인입니다! 아, 그리고 선생님 강의 댓글 1등 당첨되서 키보드도 받았네요 ㅋㅋㅋ 🙂

저는 현재, 앱을 처음부터 차근차근 선생님 스타일로 만들어 보고자 합니다.

Material3에서 색상을 넣으니, LightSchem, DarkScheme해서 엄청 많이 나오더라구요..

근데 선생님이 만드신 것 처럼, Palette나 다른 칼라 속성들 처럼 만들고 싶은데,

혹시나 material3 후에, 선생님이 일부 필요한 것들만 빼놓은걸까요?

1)혹시나 선생님이 만드실 때, grey100, 뒤에 숫자처럼 만드실 때 규칙이 있으실까요?

2) 또한, dark_theme, light_theme도 설정할 때, Material3 주소에서, dart 파일을 다운 받았을 때,
색상 정하는 규칙도 궁금합니다. 어떤 식으로 처리하신걸까요? 감사드립니다.

flutter

답변 2

DevStory

지식공유자

안녕하세요

제 강의 댓글로 받으셨다니 괜시리 제가 더 기분이 좋네요! 당첨 축하드려요 👏

Q1. Palette나 다른 칼라 속성들 처럼 만들고 싶은데, material3 후에 일부 필요한 것들만 빼놓은걸까요?

고유의 테마를 만들었기에 Material3의 일부를 가져오진 않았지만, 기본적인 네이밍 규칙이나 색상 위계를 어느 정도 참고하였습니다.

Q2. grey100, 뒤에 숫자처럼 만드실 때 규칙이 있으실까요?

정해진 방법은 없지만, 강의에선 색상의 밝기나 명도를 기준으로 밝을수록 숫자를 크게 주었습니다.

Q3. Material3 주소에서 dart 파일을 다운 받았을 때 색상 정하는 규칙도 궁금합니다.

강의에서 사용한 색상은 Material3의 dart 파일을 다운받아 구현하지 않았습니다. 색상을 정하는 규칙에도 정해진 방법은 없지만, 다만 Material3의 네이밍 규칙을 참고하여 용도에 따라 시멘틱 컬러 이름을 지정하였으며, 색상 간 대비 관계가 중요하므로 어느 정도 예측할 수 있도록 PrimaryColor 위에서 잘 보이는 색상으로 OnPrimaryColor과 같이 이름을 붙였습니다.

질문 주신 내용을 실전 강의 디자인 시스템 & 반응형 UI → 02. 디자인 시스템 구성 → 기초 요소(Foundation) → Color 파트에서 설명드리고 있으니 참고해 보시고, 추가로 궁금하신 부분은 언제든지 질문 남겨주세요!

감사합니다 🙂

인프런 AI 인턴

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

디자인 시스템 관련해서 질문 주신 내용과 유사한 자주 묻는 질문들이 있습니다. 특히 Material3을 활용하여 색상 설정을 어떻게 처리할지에 대한 내용이 많습니다.

비슷한 질문과 답변들이 강의 내에서 존재합니다. 아래 링크된 내용이 도움이 될 듯합니다.

첫강의를 따라했는데 앱바나 버튼이 보여주시는 화면과 달라요

이 질문에 대한 답변에서 Flutter의 새로운 업데이트(Material 3)로 인해 기본 테마가 바뀌었고, 이를 기존 스타일(Material 2)로 복귀하거나 커스터마이즈하는 방법을 설명하고 있습니다.

또한, 사용자가 Material3 설정에서 특정 색상 팔레트를 만들어내는 방법과 관련한 유용한 팁이 포함되어 있습니다. 이 방법에 따라 light와 dark 테마에서의 색상을 설정하는 규칙 역시 참고할 수 있습니다.

MaterialApp(
  theme: ThemeData(useMaterial3: false),
  // 여기에 나머지 코드가 들어갑니다.
)

Flutter 앱 파트별 학습 방법

여기에서는 Flutter 앱을 처음 만드는 과정에서 다양한 디자인 시스템을 다루는 방법에 대한 유용한 정보들이 나와 있습니다. 앱을 만들 때 색상 코드와 테마 등을 정하는 규칙에 대해 더 자세히 이해할 수 있을 것입니다.

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

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