프론트엔드 작업을 위한 소스

졸업과제 웹 어플리케이션을 만드는 작업에서 프론트를 맡게 되면서 3명의 인원으로 디자이너를 포함할 수 없으니, 디자인까지 맡게되었다.

그렇다고 없던 디자인 센스가 생겨나는 것은 아니니까...무료 사이트를 잘 뒤져보면 학교 5년다니면서 늘어난 ppt만드는 짬바를...활용해서...!!

 

1. 로고만들기

https://logo.squarespace.com/

Squarespace

로고는 필수다. 있어보이는 ui를 위해서는 엑박을 띄울 수도 없고, 낼 돈도 없고, 직접 svg파일을 만들 능력이 없다면 여기서 간단한 것 정도는 만들 수 있으니 활용 해 보자.

 

2. 색 조합

https://coolors.co/palettes/trending 

Trending color palettes - Coolors

색 조합 사이트는 찾으면 많다. 그 중에 내가 썼던 곳은 여기. 디자인적 감각이라곤 1도 없으니 남들이 만들어준 팔레트를 사용하자. 이걸로 웹어플의 전체 색감과 아이콘 색감을 가져다 썼다.

 

3. 아이콘 및 ui

https://material-ui.com/

Material-UI: A popular React UI framework

리액트를 사용해 본 사람이라면 누구나 안다는 사이트.

아이콘이나 ui를 직접 커스터마이징 할 수도 있고, 가져다 쓰기에도 예시 코드 및 다큐멘테이션이 잘되어 있어 너무너무너무 좋다. 잘 가져다 쓰기만 해도 대충 인스타 갬성을 낼 수 있다.

 

4. 전체 디자인

https://bootswatch.com/

Bootswatch: Free themes for Bootstrap

https://getbootstrap.com/

Bootstrap

이도 저도 모르겠다! 대강 틀만 있으면 된다 혹은 틀이라도 잡고 시작하고싶다! 라면 역시 부트스트랩만한게 없다.

리액트는 부트스트랩 붙이기도 쉽고 요즘엔 무료 부트스트랩도 많다.

여기서 대충 틀을 가져오고 색감 로고 아이콘 작업만 따로 해줘도 훨씬 퀄리티 높아진다.

 

개발 보조 도구들이 많아져서 참 좋은 것 같다.

그래도 왜 팀에 디자이너가 꼭 필요한 지 작업할 때마다 깨닫는다.

깨지지 않는 로고와 아이콘, 전체 색감 하다못해 로딩 때 뜨는 아이콘 등이 전체적인 퀄리티를 좌지우지 할 수 있다. 

전문가는 괜히 전문가가 아니다.