프론트엔드 디자인 고민

Question

프론트엔드 개발에 관심있는 대학생 3학년입니다. 프론트엔드 개발을 하면서 디자인에 대한 궁금증이 생겼습니다. 보통 협업을 할 때는 따로 디자이너와 함께하면서 프론트엔드는 피그마 디자인을 구현하면 되는데, 개인 프로젝트나 디자이너 없는 프로젝트에 관해서 디자인을 어떻게 가지고 가야하는지 궁금합니다. ...

추가적으로 개발에만 집중할 수 있는 디자인 툴 이나, 팁같은것이 있을까요?

포크코딩 · Answer

# 뭐가 좋으지는 몰라도 뭐가 구린지는 알기

아래 요소들만 피하려고 해도 좋은 디자인은 몰라도 나쁜 디자인이 나오기 힘듭니다.

## 디자인을 구리게 만드는 요소 예시
- 다양한 폰트 사용
- 다양한 색깔 사용
- 원색(완전 쨍한 색) 사용
- 정렬 없음
- 계층 구조 없음

# 창의성 버리기

- 자기 머리에서 나온 방식으로 디자인 하기 금지
- 만들고자 하는 소프트웨어의 벤치마킹 및 레퍼런스 찾기
- 레퍼런스 참고하여 디자인하기

# 개발 집중 팁

- UI는 shadcn UI 사용 https://ui.shadcn.com/
- 애니메이션은 framer-motion 사용
- 프론트 개발자라면 자신만의 UI 라이브러리 구축해 두기 (프로젝트마다 쌩판 바닥에서 시작하지 말고)

조세영 · Answer

기본적인 ui/ux 온라인 강의 한번 들으신 다음, 피그마 커뮤니티에 있는 디자인 키트 사용해보시는것 추천드립니다.
테일윈드 사용하실 줄 아신다면 Shadcn ui도 추천드립니다. 디자인에 관심이 생겼다고 하시니, shadcn ui 사용하실때에도 기본 스타일만 사용하시지 마시고 피그마 커뮤니티에 있는 다영한 키트들로 커스텀 해보는 연습하시는것 추천드립니다.