본문 바로가기
Background
개발

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

by BellRiver_Lee 2024. 10. 20.

방가링입니다!

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


개발 관련

Codepen 세트

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

PugHtml - Pug and HTML online converter in realtime

 

pughtml.com

 

SCSS to CSS Online Converter - Json2CSharp Toolkit

 

json2csharp.com

 

Babel · Babel

The compiler for next generation JavaScript

babeljs.io

 

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

www.typescriptlang.org

 

@web's CSS

코드펜 레퍼런스 사이트입니다.

wsss.tistory.com

  • 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

Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

getcssscan.com

 

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

Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

getcssscan.com

 

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

Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.

getcssscan.com

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

 

AOS

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

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

 

텍스트 아트

 

Text to ASCII Art Generator (TAAG)

 

patorjk.com

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

 

JSFiddle

 

JSFiddle - Code Playground

The fiddle listings (Public, Private, Titled, etc) will now display latest versions instead of the ones saved as Base versions - this was causing more confusion than good, so we decided to change this long-standing behavior.

jsfiddle.net

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

디자인 관련

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

 

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

 

color.adobe.com

 

Color Hunt - Color Palettes for Designers and Artists

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

colorhunt.co

 

Poline — Esoteric Color Palette Generation Library

poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar coordinates to generate pleasing color palettes.

meodai.github.io

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

 

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

 

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

사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.

www.remove.bg

 

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

여러 JPG, PNG, GIF 이미지 선택 후, 신속하게 무료로 압축하세요! 단 몇 번의 클릭으로 쉽게 압축할 수 있습니다!

www.iloveimg.com

Pexels

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

 

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

 

http://www.gdweb.co.kr

 

www.gdweb.co.kr

 

Awwwards - Website Awards - Best Web Design Trends

Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.

www.awwwards.com

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

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

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

좋은 하루 보내세요!

728x90
반응형