프런트엔드 개발자에게 추천하는 사이트 모음 (특히 뉴비)

방가링입니다!

아래 사이트를 통하여 좀 더 빨리 일을 끝내시거나 적더라도 도움이 되었으면 좋겠네요.
제가 그랬던 것처럼.

---

개발 관련

Codepen 세트

CodePen

PugHtml - Pug and HTML online converter in realtime

SCSS to CSS Online Converter - Json2CSharp Toolkit

Babel · Babel

TS Playground - An online editor for exploring TypeScript and JavaScript

@web's CSS

• Codepen은 "나 이런 것도 할 줄 알아."하고 개발자들이 스스로의 코드를 뽐내는 커뮤니티입니다.
  즐겨찾기에 등록하고 심심할 때 보면 많은 영감을 얻을 수 있습니다.
• 가끔 Pug, SCSS, Babel, TypeScript처럼 코드를 뽑아도 바로 사용할 수 없는 경우가 있습니다.
  위에 세트로 같이 있는 컨버터들을 사용해서 HTML, CSS, JS로 변환하여 바로 사용할 수 있습니다.
• 웹에서 코드 에디터로 사용할 수 있습니다.
  웹 코드 에디터는 아래에 추천해드릴 JSFiddle를 좀 더 추천드립니다.
• @webs 사이트는 코드팬의 알짜배기 코드들을 모아놓은 것만 같은 사이트입니다.
  보고 있으면 눈이 즐거운 인터렉션이 많아서 추천드립니다.
• Codepen에는 개성이 강한 코드들이 많아서 실무에서 사용하기 어려운 경우가 많습니다.
  너무 Codepen 코드에 매달리지 마시고, 참고용으로만 본다고 보시는 게 맘 편합니다.

 

CSS 버튼, 체크박스(input), Radio(input) 모음

CSS Scan - The fastest and easiest way to check and copy CSS

CSS Scan - The fastest and easiest way to check and copy CSS

CSS Scan - The fastest and easiest way to check and copy CSS

• 순서대로 버튼, 체크박스, 라디오입니다.
  CSS로 만들 수 있는 도형, 모양도 하단의 링크에서 참고하실 수 있습니다.
• 웹 디자이너에게 예시로 보여드리고 이런 템플릿을 사용하면 빠르고 높은 퀄리티로 만들 수 있다고 사전 조율을 하면 모두가 행복해질 수 있습니다.
  이미 만든 디자인에 이렇게 개성이 강한 인터렉션을 사용하기는 어려울 수 있습니다.

 

AOS

AOS - Animate on scroll library

• 스크롤로 인해 컨텐츠가 보일 경우 "스윽"하고 움직이게 만들어주는 라이브러리입니다.
  화면 최상단에 컨텐츠가 위치할 경우 화면이 열리자마자 컨텐츠가 "스윽" 움직여서 있어빌리티가 상당합니다.
• 하단의 link와 script만 삽입하고, AOS.init();만 선언해주면 바로 사용할 수 있다는 편리함이 있습니다.
  극강의 효율 가성비 라이브러리입니다. 적극 추천. (충돌도 잘 안 나요.)

 

텍스트 아트

Text to ASCII Art Generator (TAAG)

• 귀여운 텍스트 아트를 만들어주는 사이트입니다.
  제 블로그를 개발자 도구(F12)로 여시면 어떤 느낌인지 확인하실 수 있습니다.
• 대부분의 디자이너들이 짜친다고 생각합니다.
  대부분의 개발자들이 유쾌하다고 생각합니다.

 

JSFiddle

JSFiddle - Code Playground

• 가끔 급하게 코드를 공유하거나 코드 에디터가 없는 컴을 사용할 때가 있습니다.
  이때 바로 코드를 작성해서 URL로 코드 결과를 보고, 공유할 수 있습니다.
  (회원가입 필요 없음.)
• 사용법:
  코드 작성 > Ctrl + S키(저장) > 브라우저 상단의 URL이 바뀐 것을 확인하면 해당 URL을 상대방에게 공유.

---

디자인 관련

색 조합, 색 추천: Adobe Color, Color Hunt, Poline

https://color.adobe.com/ko/create/color-wheel

Color Hunt - Color Palettes for Designers and Artists

Poline — Esoteric Color Palette Generation Library

• 어도비 컬러:
  색상 추천, 찾기 할 때 사용해야 하는 단 하나의 사이트가 있다면 어도비 컬러를 추천해 드립니다.
  어도비 공식이어서 기능이 알차며, 조화로운 색상을 손쉽게 뽑을 수 있습니다.
  현업 디자이너한테 추천받은 사이트.
• Color Hunt:
  외국 느낌의 색조합을 추천해 주는 사이트.
  국내에 어울리는 색 조합을 찾기는 다소 어렵습니다.
  Hex 색상 코드로 바로 관련 색 조합을 찾을 수 있습니다.
• Poline:
  "우와 사이트 겁나 이쁘당. 감성 와!" 하는 색 조합 사이트.
  감성에는 다소의 불편함이 필수입니다.
  

 

이미지 관련: 이미지 배경 제거, 이미지 압축, 이미지 다운

이미지 배경 제거, 투명 배경 만들기 – remove.bg

최상의 해상도로 쉽고 신속하게 이미지를 압축하세요

Pexels

• 이미지 관련 사이트, 툴을 정말 많이 사용해 봤지만 위 3개가 가장 손이 많이 갔습니다.
• 이미지 배경 제거는 기능면에서 다소 아쉬울 수 있으나, 디자이너가 없는 경우에는 이만한 게 없습니다.
  저는 답답해서 제가 누끼 따는 법을 배웠습니다.
  요즘은 모바일에서 자체적으로 누끼를 딸 수 있으니 참고용으로 보면 좋습니다.
• 상업적 목적을 위해 이미지를 사용해야 할 경우 Pexels를 추천드립니다.
  동영상도 있고, 해당 이미지를 직접적인 돈벌이로 사용하지 않는다면 상업적으로 이용할 수 있습니다.

 

사이트 디자인 레퍼런스: GDWEB, Awwwards

http://www.gdweb.co.kr

Awwwards - Website Awards - Best Web Design Trends

• 국내 정서는 GDWEB, 국외 정서는 Awwwards를 추천드립니다.
• 사이트를 만들다 보면 자주 막힙니다. (기획, 디자인, 개발 등등 모든 부분에서)
  업무 중 너무 머리가 안 돌아가시면 웹 서핑 느낌으로 보시면 좋습니다.
  누가 뭐라 하면 시장조사라고 하면 됩니다.

---

일단 이 정도?
요정도만 있어도 즐겨찾기(꼭! 막상 필요할 때 기억 안 나더라고요.) 한 다음에 가끔씩 떠오를 때마다 유용하게 사용할 수 있습니다.

부디 스트레스받지 마시고 편한 개발하시기를 기원합니다.

좋은 하루 보내세요!