Kudos
Collect
Twiiter
Facebook
Share
개발의 'ㄱ'자라도 아는 날을 기대하며...

코딩을 공부하는 웹디자이너들을 위한 유용한 사이트 모음

마지막 업데이트 1년 전
0 0 0 2

웹디자이너의 활동범위를 넓히고 스펙을 높이기 위해 요즘 코딩을 공부하시는 분이 많으신데요. 공부를 이제 막 시작하신 분들이 알아두면 좋은 사이트를 모아봤습니다.

1. 스택오버플로우 (Stack Overflow)

Stack Overflow 웹페이지
Stack Overflow 웹페이지

코딩을 비롯한 개발이란걸 하는 사람들이라면 모두 잘 알고 많이 이용하는 사이트입니다. 개발하는데 궁금한 점을 묻고 답하는 지식인 같은 사이트인데, 답변에 대한 퀄리티가 최고입니다^^

뭔가 코딩이 막혔을 때 구글에 질문을 검색하실텐데, 그 때 이 사이트로 시작되는 글이 있으면 꼭 한 번 보시길 추천드립니다. 가능하시면 영어로 검색하시는 걸 추천드립니다. ( 한글이 좀 없어요… ㅜㅜ )

사이트 주소 : https://stackoverflow.com/

2. CSS-TRICKS

CSS-TRICKS 웹페이지
CSS-TRICKS 웹페이지

웹디자이너로 코딩을 공부하시면, 아마 HTML + CSS 를 많이 공부하실텐데요. CSS 에 대해 전문적인 글과 꼼수(^^?)를 볼 수 있는 곳입니다. 전 이 사이트에서 grid 를 주로 참고하는데요. 정리도 잘 되어있고, 좋은 정보들이 참 많습니다. 단점이라면… 한국어가 없고 영어로만 되어있다는거… ㅜㅜ

사이트 주소 : https://css-tricks.com

3. 피그마 (Figma)

Figma 웹페이지
Figma 웹페이지

맥의 디자인을 위한 앱중에 유명한 Sketch 앱과 비슷한 디자인 툴입니다. Sketch 앱과 달리 브라우저에서 실행되기 때문에 운영체제와 상관없이 사용할 수 있어서 좋습니다. 한 프로젝트 파일에 여러사람이 같이 수정할 수 있어서 디자인 협업툴로도 많이 사용되고 있습니다.

웹디자이너 분들이시라면, 디자인 툴 사용은 전문가이실텐데요. 이 피그마를 소개해드리는 건 디자인한 객체들을 CSS 로 변환해서 보여주는 기능때문입니다. 화면 구성을 디자인해보고 그 구성에 사용된 객체들을 클릭하고 오른쪽 사이드바 메뉴에 Inspect 를 클릭하면 CSS 코드를 확인할 수 있습니다. 은근히 편하답니다.

사이트 주소 : https://www.figma.com/

4. 포토피아 (Photopea)

Photopea 웹페이지
Photopea 웹페이지

웹페이지에서 일러스트나 이미지 편집 등 포토샵 기능을 사용할 수 있는 사이트입니다. 브라우저를 통해서 사용하기 때문에 인터넷이 연결된 곳이라면 어디서든 사용할 수 있고, 회원가입 없이도 사용해 볼 수 있다는게 장점입니다. 웹디자이너라면 이 사이트는 그냥 한 번 접속해보시면 아~! 하실거에요^^

사이트 주소 : https://www.photopea.com/

5. 에스드롭 (Essedrop)

Essedrop 웹페이지
Essedrop 웹페이지

HTML 과 CSS 등 프론트엔드 코딩을 공부하시다보면 웹페이지를 많이 만들어보실텐데요. 이럴 때 <img> 태그나 아이콘, 로고, 배경이미지 등 이미지 파일 소스를 입력할 때 필요한 이미지 URL 을 쉽게 만들 수 있는 곳입니다.

한국어도 잘 되어있고, 이미지 파일을 마우스 드래그 앤 드롭으로 간단하게 업로드할 수 있습니다. 업로드 한 이미지를 클릭하면 이미지 URL 이 클립보드에 바로 복사되서 이미지 소스가 필요한 곳에 Ctrl+v로 붙여넣기만 하면 됩니다.

무료회원가입하면 100Mb 의 용량을 받고 친구소개로 500Mb 까지 무료로 확장할 수 있어서, 코딩 공부나 간단한 웹페이지 만들기에 좋은 곳입니다.

사이트 주소 : https://essedrop.com/

6. 순수한 자바스크립트 코드 모음 ( You might not need jQuery )

You might not need jQuery 웹페이지
You might not need jQuery 웹페이지

프론트엔드 코딩을 공부하시는 분들중에 동적인 페이지를 만들기위해 제이쿼리나 타입스크립트 혹은 React 나 Vue 를 공부하시는 분들이 계실텐데요. 그런 분들에게 유용한 제이쿼리에서 사용되는 명령어들을 검색해보시면, 자바스크립트 코드를 확인해볼 수 있는 사이트입니다.

기초가 되는 자바스크립트 코드를 확인해보고 공부하기에 좋은 사이트입니다.

사이트 주소 : http://youmightnotneedjquery.com/

마치며

여기 소개해드린 사이트들은 무료로 사용할 수 있는 사이트들로, 코딩을 공부하고 있는 웹디자이너분들에게 도움이 되었으면 좋겠습니다. 다른 추천해주실 사이트가 있으면 댓글로 알려주세요^^ 내용에 추가하도록 하겠습니다.

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.

Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

  • 생활코딩도 빠질 수 없죠. 아마 코딩 입문하시거나 배우시는 분들 사이에선 잘 알려져 있을 거에요. 저 역시도 추천받아서 유튜브를 통해 강의 들었었고요.

    • 생활코딩이 있었군요!^^ 추천 감사합니다!

저자 @brad 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.