라뮤엣인류이야기

웹사이트 디자인 개발 해외 라이브러리 제공 사이트 -La Muette's Blog 본문

Beyonds

웹사이트 디자인 개발 해외 라이브러리 제공 사이트 -La Muette's Blog

La Muette 2020. 3. 23. 00:13
반응형

안녕하세요.

 

오늘 포스팅 주제는 웹사이트 디자인과 개발에 관한 주제 인데요.

 

저는 오래전부터 웹디자인하고 개발에 취미가 있어서 쭉 해오고 있는데요.

 

제 글을 보고 계시는 여러분들에게 CSS개발 위주로 필요한 유용한 웹사이트 몇개를 소개 하려 고 합니다.

 

뭐 이런 CSS 프레임워크 라이브러리들은 Bootstrap 등과 같이 가장 많이 쓰이는 라이브러리도 있는데요.

 

이 사이트에서는 거의 필요한 모든 기본적인 디자인 요소들을 찾을수 있지만

 

가끔 다른 디자인을 찾고 싶기도 해서 여러 해외 라이브러리에 대해서 찾다가

 

몇개 추려서 제가 선호하는 순서로 여러분들과 공유하려고 합니다. 

 

 

1. W3 Schools

 

https://www.w3schools.com/

 

 

웹사이트 개발을 배우는데 거의 첫 관문 사이트라고 불릴정도로 초보자들이 많이 이용하는 사이트인데요.

 

정말 기초적이고 기본적인 툴들이 제공되고 영어가 가능하시다면 정말 쉽게 설명이 되어있습니다.

 

저도 처음에 웹개발을 배울때 이곳을 통해서 많이 익혔으며 기초적인 웹사이트를 만드는데 충분한 정보들이 있고.

 

무료 웹사이트 Template들도 제공 되고 있습니다.

 

처음 웹개발 시작하시는 분들에게 추천하는 사이트중 하나 입니다. 

 

 

 

2. CodePen

https://codepen.io/

 

 

개인적으로 가장 마음에 들고 자주 이용하는 사이트이고

 

많은 웹사이트 디자인 개발 고수분들이 직접 본인인 만든것을 올리고 공유하는 형태 입니다. 

 

CSS와 Javascript들을 어쩜 이렇게 예술적으로 만들었는지 가끔 감탄이 나오는 것들도 있습니다.

 

물론 이것들을 사용하려면 작가들의 저작권 이용 기준에 대해서 읽어봐야되고

 

대부분은 작가의 정보와 출처를 본인이 제작하는 웹사이트 개발툴에 남겨두면 됩니다. 

 

 

 

 

3. Awwwwwards

https://www.awwwards.com/

 

 

Awwwwwwards는 여기는 정말 웹사이트 디자인 개발의 초고수들이 본인들의 작품을 올리고

 

사람들한테 평가를 받는 해외 사이트 입니다.

 

라이브러리라기보다는 중고수 분들이 디자인적 영감과 동기부여를 받을수 있는 사이트 입니다.

 

사실 이 초고수 (고인물)의 영역은 실제 우리가 많이 이용하는 웹사이트들에서

 

보기 힘든 디자인 구조인경우가 많아서 명품이나 고급차를 위한 마케팅용 웹사이트와 가장 어울릴법한 디자인들이 많습니다.

 

만약 여러분들 중 웹 디자인 개발의 최고봉에 도전해보고 싶다.

 

그럼 이사이트에서 많은 영감을 받으시고 고수의 영역에서 평가를 많으시면

 

이쪽 영역에서 본인의 스킬이 어느정도인지 가늠해볼수 있는 기회라고 생각합니다. 

 

 

4. Materialize Design

https://materializecss.com/

 

이 라이브러리는 구글에서 개발했는데요.

 

웹사이트에 보니 네명의 카네기 멜론 대학생들이 개발한 플랫폼이네요.

 

뭐 이보다도 웹사이트에 좋은 디자인 요소들을 찾는것이 더 중요한데요,

 

이 사이트의 목적은 더 넓은 사람들의 디자인 욕구를 충족시켜주기 위해서 만들어 졌다고 하는데,

 

사실 이거는 주관적인거라서 이용자의 입장에서 만족스러운 것들을 찾으면 되는거 같아요.

 

라이브러리가 상당히 직관적이고 심플한 디자인이라서

 

금방 쉽게 필요한 CSS와 Java Script에 필요한 정보들을 찾을수 있습니다. 

 

 

 

 

5. Semantic UI

https://semantic-ui.com/

 

Semantic UI

Shipping Choose your shipping options

semantic-ui.com

 

UI(User Interface)에 최적화된 라이브러리라고 소개는 되어있는데요,

 

꽤 심플하면서 깔끔한 디자인을 선호하시는 분들에게 맞는거 같아요.

 

그런데 개인적으로 위에 있는 Material Design에 피하면 덜 직관적이지만 가끔 유용할때도 있는거 같습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

반응형
Comments