개발자
프론트엔드 디자인 고민
프론트엔드 개발에 관심있는 대학생 3학년입니다. 프론트엔드 개발을 하면서 '디자인'에 대한 궁금증이 생겼습니다. 보통 협업을 할 때는 따로 디자이너와 함께하면서 프론트엔드는 피그마 디자인을 구현하면 되는데, 개인 프로젝트나 디자이너 없는 프로젝트에 관해서 디자인을 어떻게 가지고 가야하는지 궁금합니다. ... 추가적으로 개발에만 집중할 수 있는 디자인 툴 이나, 팁같은것이 있을까요?
답변 2
# 뭐가 좋으지는 몰라도 뭐가 구린지는 알기 아래 요소들만 피하려고 해도 좋은 디자인은 몰라도 나쁜 디자인이 나오기 힘듭니다. ## 디자인을 구리게 만드는 요소 예시 - 다양한 폰트 사용 - 다양한 색깔 사용 - 원색(완전 쨍한 색) 사용 - 정렬 없음 - 계층 구조 없음 # 창의성 버리기 - 자기 머리에서 나온 방식으로 디자인 하기 금지 - 만들고자 하는 소프트웨어의 벤치마킹 및 레퍼런스 찾기 - 레퍼런스 참고하여 디자인하기 # 개발 집중 팁 - UI는 shadcn UI 사용 https://ui.shadcn.com/ - 애니메이션은 framer-motion 사용 - 프론트 개발자라면 자신만의 UI 라이브러리 구축해 두기 (프로젝트마다 쌩판 바닥에서 시작하지 말고)
기본적인 ui/ux 온라인 강의 한번 들으신 다음, 피그마 커뮤니티에 있는 디자인 키트 사용해보시는것 추천드립니다. 테일윈드 사용하실 줄 아신다면 Shadcn ui도 추천드립니다. 디자인에 관심이 생겼다고 하시니, shadcn ui 사용하실때에도 기본 스타일만 사용하시지 마시고 피그마 커뮤니티에 있는 다영한 키트들로 커스텀 해보는 연습하시는것 추천드립니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
4월 17일
개인 프로젝트나 디자이너 없는 프로젝트에서 디자인을 다루는 방법에 대해 몇 가지 제안을 드리겠습니다: 1. **디자인 시스템 이용**: 여러 개발자들이 참조할 수 있는 일관성 있는 인터페이스를 만들어주는 디자인 시스템(예: Material Design, Ant Design 등)을 이용하는 것이 좋습니다. 이렇게 하면 UX/UI에 대한 깊은 지식이 없어도 괜찮은 사용자 경험을 제공할 수 있습니다. 2. **UI 키트/템플릿 활용**: 갖가지 터치 포인트를 위한 준비된 컴포넌트 세트인 UI 키트를 활용하면 디자인 작업을 많이 줄일 수 있습니다. 또한, 테마 등 다양한 요소가 이미 결정된 템플릿을 사용하여 시간을 절약하고 아름다운 웹사이트를 만들 수 있습니다. 3. **디자인 학습**: 개별적으로 웹 및 UI/UX 디자인에 대해 알아보는 것도 좋은 선택입니다. 'Don't Make Me Think', 'The Design of Everyday Things'와 같은 책을 읽거나, 관련 온라인 강좌를 들을 수 있습니다. 4. **사용자 피드백 활용**: 사용자들의 피드백과 반응을 모니터링하면서, UI/UX를 개선해나갈 수 있습니다. 5. **프로토타이핑 도구 활용**: Figma, Adobe XD와 같은 프로토타이핑 도구를 이용해 직접 디자인을 만들어보는 것도 추천합니다. 이런 경험은 당신의 프론트엔드 기술 뿐만 아니라 디자인 감각까지도 향상시킬 수 있습니다. 따라서, 디자인에 대한 지식은 프론트엔드 개발자에게 분명 중요한 가치를 제공하지만, 다른 방법으로도 충분히 극복할 수 있다는 것을 알아두세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!