해결된 질문
24.07.18 16:25 작성
·
172
1
안녕하세요, 볼드 멘토님 🙂
강의를 들으며 현재 버튼과 텍스트필드를 구축해보는 중에 궁금사항이 생겨 질문드리게 되었습니다.
해상도마다 텍스트필드 사이즈에 따라 placeholder나 label 등의 폰트 사이즈가 다르게 구성되도록 구축해야하는지 궁금합니다.
이런 식으로 텍스트필드 위 아래에 들어갈 요소들을 사이즈별로 구축을 해야할 필요성이 있는건지 적응형, 반응형에 따라 달라지는건지 궁금합니다. meterial design system은 버튼이나 텍스트필드가 하나로 정해져서 나오는것 같은데 figma design system은 버튼 사이즈마다 안 텍스트 크기가 다 다르게 구축이 되어있어서 서비스마다의 차이인건지 궁금합니다!ㅠㅜ
감사합니다-!
답변 2
1
2024. 07. 19. 05:27
우선 기기마다 다른데, 모바일, 데스크탑의 경우는 바디 텍스트의 경우에는 이렇게까지 안 나누어도 될 것 같습니다. 하지만 TV화면인 경우는 기본 폰트가 24px이기 때문에 바꾸는게 좋을 것 같습니다. 하지만 이것도 나중에 타이포그래피 베리어블을 배우면 쉽게 할 수 있습니다.
만약 회사에서 일하시는 것이 모바일, 데스크탑인 경우는 우선 하나의 라벨로만 하시는 걸 권장드립니다.
버튼 사이즈의 경우는 Large, Medium, Small로 구분 될 수 있습니다. Large의 경우는 16px, Medium, Small의 경우는 14px이렇게 들어갈 수도 있습니다. 제 강의 처럼 하나로 통일해도 무방합니다.
우선 하나로 통일해서 만들어보시고 나중에 필요에 따라 추가로 만들어 보시는 것을 추천드립니다.
또 궁금하신 부분 있으시면 언제든지 질문 주세요.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
뚱배추님, 질문하신 “textfield에 맞는 font size 정의”와 관련하여 아래의 기존 답변 링크가 도움이 될 것 같습니다.
텍스트필드 사이즈에 따라 폰트 사이즈를 다르게 구성해야 하는지에 대한 질문과 관련하여, 일반적으로는 UI/UX 디자인에서 적응형 디자인(adaptive design)과 반응형 디자인(responsive design)의 개념을 적용하여 디자인 시스템을 구축합니다. 적응형 디자인에서는 특정 브레이크포인트에 맞춰 디자인 요소들(예: 텍스트 필드, 버튼 등)의 사이즈나 스타일을 조정하며, 반응형 디자인에서는 더 유동적으로 요소들이 화면 크기에 따라 변화합니다.
Material Design System, Figma Design System을 포함한 다양한 디자인 시스템은 각각의 사례에서 사용되는 구체적 규칙과 가이드라인을 제공합니다. 일반적으로 서비스마다, 프로젝트마다 필요에 따라 다르게 적용될 수 있습니다. 따라서 뚱배추님의 경우, 프로젝트의 목적과 사용자 경험 목표에 맞게 폰트 사이즈와 요소 크기를 결정하는 것이 중요합니다.
질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 07. 19. 11:09
감사합니다 :D