드림엘리 : 프론트엔드 입문 - 15. 디자인 무료 온라인 툴

디자인 무료 온라인 툴

• color space(https://mycolor.space/)
  • 웹사이트를 만들 때 컬러 팔레트를 쉽게 만들 수 있는 툴
  • 하나하나 색상 찾는 수고로움을 덜어주는 툴이다
  • 웹사이트에서 사용할 주 색상을 정해놓으면 그에 맞는 다양한 색상 조합들을 보여줌
• css gradient(https://cssgradient.io/)
  • gradient 컬러를 만들 수 있게 해주는 툴
  • 시각적으로 확인하면서 원하는 gradient를 만들 수 있다
  • 다양한 방면에서 사용되지만 버튼에서 특히 많이 사용됨
  • 다 만든 후 아래쪽 copy to clipboard 해서 css에다가 붙여넣어서 그대로 적용 시킬 수 있음
• SVC 활용할 수 있는 툴(svc를 활용해 section을 수평적으로 나누는 것이 아니라 다른 모양으로 나누기 가능)
  • SVC(Scalable Vector Graphics) : 사이즈가 고정된 이미지 파일과는 다르게 svg 파일 안에는 경로와 색상에 대한 정보를 갖고 있어 원하는 사이즈 별로 늘이거나 줄여도 전혀 깨짐없이 확인이 가능한 이미지 파일
  • shape divider(https://www.shapedivider.app/)
    • 지정된 모양 뿐 만 아니라 높이와 너비 지정 가능
    • 원하는 모양과 색을 시각적으로 확인 가능
    • 다운로드 버튼 누르면 복사 가능한 html 코드와 css 코드 나옴
  • haikei(https://haikei.app/)
    • 추상적인 svg 모양 만들기 가능
    • 주요 요소가 아니더라도 다른 요소들을 돋보이기 위해 background으로 사용될 수 있음
    • 버튼으로도 활용 가능
    • 왼쪽에서는 원하는 모양 선택 가능, 오른쪽에서는 세부 조정, 다른 모양 만들고 싶을 경우 주사위 모양 클릭 시 랜덤하게 선택도 가능
    • png와 svg로 다운로드 가능(너비 높이, 수평 수직 비, gradient, position 등 설정 가능)
• cool background(https://coolbackgrounds.io/)
  • 독특한 백그라운드 이미지 만들 수 있음
  • 다양한 모양의 백그라운드 패턴 등을 선택 가능
  • main 색 설정시 그 색과 관련된 패턴들 확인 가능하고 색상 지정 가능
  • 다운로드 가능
• dribble(https://dribbble.com/)
  • 디자인 센스 없을 경우 추천
  • 디자인 요소 감각 키우기 좋음
  • 다양한 웹사이트와 어플리케이션을 볼 수 있어 아이디어를 얻을 수 있는 사이트
  • popular 클릭시 현재 유행하는 디자인 볼 수 있음
  • good for sale 클릭 시 디자인 요소들을 판매하는 것을 볼 수 있다.(무료(filter tab>price=0 로 검색)로 제공되는 것도 꽤 많이 있어 활용해보는 것도 나쁘지 않다)