앗뜨거워

웹디자이너에게 유용한 UI/UX, CSS, 컬러, 폰트 사이트 모음집을 소개합니다.

요즘 많이 언급되고 있는 디자인 오픈소스 및 포트폴리오 웹사이트 외에, 씸플의 디자이너 분들의 추천 사이트를 선별하여 공유하겠습니다. 각 타이틀을 클릭하면 해당 링크로 이동합니다.

1

UI/UX

UX Magazine

사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 사이트

UX관련 컨퍼런스 정보와 전세계의 UX디자이너 구인구직 현황도 살펴볼 수 있어 해외 취업 트렌드도 파악할 수 있습니다. 모든 글이 영어기 때문에 어려운 부분도 있지만, 최신 트렌드를 읽는 웹디자이너라면 일상이 되어야 할 것 같습니다 :)

Troy Labs

다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 사이트

삼성, 애플, LG, 구글, 팬택, HTC, 소니 등 초기 모델부터 최신 기종까지 구성되어 매우 편리합니다. 기종을 선택하고 웹사이트 링크만 붙여 넣으면 각 디바이스에서 어떻게 구현되는지 확인할 수 있습니다.

Capptivate

UI애니메이션 패턴 라이브러리 사이트

이제 UI 애니메이션은 앱이나 웹을 구현할 때 배제할 수 없는 중요한 부분이 되었고, 이를 구현할 때에도 공간감이나 가독성을 최대한 고려하는 등에 대한 고민이 필요한 시점이 도래했습니다. Capptivate는 인포그래픽, 인터랙션, 네비게이션, 로딩 페이지 등 카테고리를 나누어 애니메이션 패턴을 확인할 수 있어서 편리합니다.

2

CSS/jQuery

Codrops

다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹사이트

데모뷰로 기능을 확인할 수 있으며, 소스 다운로드를 포함해 수많은 자료를 담고 있어 웹 디자인 및 개발과 프로그래밍에 유용합니다. 라이센스 또한 상업용 등에 제한을 두지 않고 있지만, 재배포시 제한이 있을 수 있습니다.

Awwwards

우수 웹사이트 소개 및 수상작 모음 웹사이트

CSS 기술에 특화된 웹사이트들이 많고, 링크를 타고 이동해 실제 페이지를 살펴볼 수도 있으며 각 부문별 점수를 직접 매길 수도 있습니다. 독특한 시도와 실험적인 인터랙션 웹사이트도 적지 않으니 구경하는 재미가 쏠쏠합니다.

Media Queries

미디어 쿼리를 이용한 사이트 갤러리

모바일, 태블릿, 데스크탑 사이즈의 템플릿을 한눈에 볼 수 있도록 구성되어 있고, 무료로도 받을 수 있습니다. 전부 무료인 것은 아니니, 참고하시길 바랍니다.

SpinKit

스플래시 모음 사이트

8가지의 로딩 애니메이션 효과와 직접 적용할 수 있는 CSS소스도 편리하게 제공하고 있습니다. 종류가 많지 않은 점이 아쉽지만 버튼 및 효과를 최소화한 미니멀리즘을 추구해 굉장히 깔끔한 인상을 주고 있습니다.

스플래시(Splash)와 사용자 경험의 접목

스플래시는 프로그램 시작 시 타이틀 화면이나 로딩 창을 보여줌으로써 사용자에게 어떤 프로그램이 구동 중이고 어떤 상태인지 알려 주는 중요한 역할을 하고 있습니다. 
종종 제품이나 디자인을 접할 때면, 아주 사소한 것들이 제품과 디자인의 완성도를 결정하는 일들에 놀라곤 합니다. 스플래시 화면의 기다림을 놀랍고 재미있는 경험으로 바꾸는 것만으로도 사용자에게 훨씬 좋은 경험을 줄 수 있을 것입니다.

출처 — http://uxd-trend.tistory.com/17

3

디자인 템플릿

DBF

디자인 포트폴리오 자료 모음집

Dribbble과 Behance의 디자인 자료 소스를 한곳에 모아 두어 양쪽 사이트를 가지 않아도 편리하게 디자인 템플릿들을 검색할 수 있는 사이트입니다. 각 이미지별로 여백 없이 시원시원하게 구성되어 있어 한눈에 알아보기 편리합니다.

365PSD

무료 디자인 템플릿 다운로드 사이트

다양한 웹·모바일 GUI, 아이콘 등의 PSD파일을 무료로 다운받을 수 있는 웹사이트로 유명하며, ios 8을 포함한 최신 디자인 트렌드를 반영한 자료도 마음껏 찾아보고 다운받아 이용할 수 있습니다.

One Page Love

원 페이지 웹디자인 템플릿 사이트

2015 웹디자인 트렌드에서 언급했던 것처럼, 내년에도 대세가 될 원 페이지 디자인만을 모아 둔 사이트입니다. 카드형 디자인을 통해 보기 쉽도록 구성해 두었고, 각 디자인 템플릿의 퀄리티가 좋은 편이라 디자인적 영감을 찾는 데 좋은 사이트입니다.

4

그 외, 유용한 사이트

Degraeve

이미지에서 즉시 컬러를 추출해 팔레트를 생성

이미지나 사진에 있는 컬러를 사용하고 싶으나 잡색이나 노이즈 때문에 추출이 어려웠다면, 이제는 이미지만 첨부하면 자동으로 색상이 추출됩니다! 10가지 색을 파일 첨부와 URL 링크 두 가지 방법으로 이용할 수 있습니다.

Granneman

OS별 기본 서체 리스트업 사이트

윈도우, 맥 OS, 리눅스, 안드로이드, ios 등의 기본 서체들이 리스트업되어 있어 편하게 확인해 볼 수 있고, 오퍼레이팅 시스템과 각 OS별 폰트 사이즈 등 상세한 내용 또한 읽을 수 있습니다.

jpegmini

화질변화 없이 jpg파일의 용량을 줄여 주는 사이트입니다.

이미지 최적화(image optimization)가 웹사이트의 로딩시간을 좌우하지만, 고화질 이미지를 사용하자니 로딩 시간이 너무 길고, 용량이 작은 이미지를 쓰자니 화질이 많이 떨어지는 단점이 존재했습니다. 이를 보완해 주는 jpegmini는 화질변화가 거의 없이 용량을 최소 절반 이하로 줄여 주어 매우 편리합니다.

웹용은 무료이지만, 설치용은 구입 후 사용이 가능하니 참고하시길 바랍니다.

씸플 홈페이지 / 페이스북 / 트위터

웹디자이너를 위한 참고 사이트 정리
1. UI/UX

• UX Magazine — 사용자 경험과 관련된 최신 뉴스와 기사를 받아볼 수 있는 곳
  
• Troy Labs — 다양한 디바이스 템플릿에서 반응형 웹을 확인 할 수 있는 곳
• Capptivate — UI애니메이션 패턴 라이브러리

2. CSS/jQuery

• Codrops — 다양한 웹디자인 튜토리얼, 레이아웃 모음, jQuery 플러그인을 제공하는 웹
  
• Awwwards — 우수 웹사이트 소개 및 수상작 모음집
• Media Queries — 미디어 쿼리를 이용한 사이트 갤러리
• SpinKit — 스플래시/로딩 애니메이션 모음집

3. 디자인 템플릿

• DBF — 디자인 포트폴리오 자료 모음집
• 365PSD — 무료 디자인 템플릿 다운로드 사이트
• One Page Love — 원 페이지 웹디자인 템플릿 사이트

4. 그 외, 유용한 사이트

• Degraeve — 이미지에서 즉시 컬러를 추출해 팔레트 생성
  
• Granneman — OS별 기본 서체 리스트업 사이트
• jpegmini — 화질변화 없이 jpg파일의 용량을 줄여 주는 사이트

출처 : https://cimple.postype.com/post/812/

http://app.fontastic.me/

아이콘 폰트 쉽게 만드는곳 가입도 완전 쉬움 

우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다.

웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다.

우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다.

오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 당신은 아마 단 한 번도 들어본 적 없을겁니다. 시작해볼까요.

rem

어쩌면 당신에게 조금 익숙할 수 있는 단위로 시작해보죠. em은 현재의 font-size를 정의합니다. 일례로, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.

여기, div에 font-size를 1.2em으로 지정했습니다. 이 예제에서는 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.

그런데 여기 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떤 일이 생길까요? 같은 CSS를 적용한 동일한 코드를 추가해보았습니다. 각각의 div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 됩니다.

이것은 어떤 경우엔 바람직하겠지만 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 하지요. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위)"를 뜻합니다. 최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그입니다.

이전 예제에서 만든 복잡한 단계의 세 div는 모두 16.8px의 폰트 사이즈로 표현되었습니다.

그리드시스템에 좋겠죠.

rem은 폰트에서만 사용하진 않습니다. 예를 들어, 그리드 시스템이나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있습니다. 보다 정확한 폰트 사이즈나 크기 조정을 가능하게 해줄 겁니다.

개념적으로 보면, 이 아이디어는 여러분의 콘텐츠 사이즈를 조절 할 수 있는 인터페이스 전략과 유사합니다. 그러나 모든 경우에 반드시 이런 방법을 따를 필요는 없습니다.

지금 사용이 가능한가?

rem (root em) 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

vh와 vw

반응형 웹디자인 기술은 퍼센트 값에 상당히 의존하고 있습니다. 하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아니지요. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다. 만약 너비값과 높이값을 부모 요소의 너비값의 뷰포트에 맞게 사용할 수 있다면 어떨까요? 바로 vh와 vw 단위가 그런 의도에 맞는 단위라는 사실.

vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면1vw는 7.5px이 됩니다.

이 규칙에는 무궁무진한 사용방법이 있습니다. 예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다.

스크린의 너비값에 꽉 차는 헤드라인을 만든다고 상상해보세요. vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다. 저 사이즈는 브라우저의 너비에 맞춰 변할 것입니다.

지금 사용 가능한가?

뷰포트 vw, vh 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.

vmin과 vmax

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과vmax는 너비값과 높이값에따라 최대, 최소값을 지정할 수 있습니다. 예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 됩니다. 너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

어때요, 이 값들을 사용할 수 있나요?

언제나 스크린에 보여지는 요소를 만든다고 상상해보세요. 높이값과 너비값을 vmin을 사용해 100으로 지정합니다. 예를 들어 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.

만약 커버처럼 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우에는 같은 값을 vmax로 적용하면 됩니다.

알려드린 이 규칙들을 잘 조합해 활용하면 뷰포트에 맞는 매우 유연한 방식으로 사이즈 조절을 가능하게 할 수 있습니다.

지금 사용 가능한가?

뷰포트 단위: vmin, vmax의 호환성은 caniuse.com에서 확인할 수 있습니다.

ex와 ch

ex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다. em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.

ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 "고급 척도"로 정의됩니다. 흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch;는 40개의 문자열을 포함하고 있다는 뜻입니다. 이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.

ex 단위의 정의는 "현재 폰트의 x-높이값 또는 em의 절반 값"이라고 할 수 있습니다.x-높이값은 소문자 x의 높이값이기도 합니다. 폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.

이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다. 예를 들어, 위첨자 태그인  sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다. 아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다. 브라우저는 위첨자와 아래첨자의 기본값을 vertical-align으로 정의하고 있지만, 보다 정교한 사용법을 알고 싶다면 아래와 같이 작성할 수 있습니다.

지금 사용 가능한가?

ex는 CSS1부터 있던 단위였고, ch 단위는 아직 찾을 수 없습니다. 에릭 마이어의 블로그에 있는 CSS 단위와 값에서 보다 많은 상세 정보를 볼 수 있습니다.

결론

여러분의 막강한 CSS 도구들의 무한한 확장과 지속되는 개발환경에 계속 눈을 뜨고 지켜보세요 아마 특정 문제를 해결하기 위해 예상치 못한 해결방법으로 이 애매한 특정 단위들을 사용할 수도 있을 것입니다. 새로운 스펙들을 시간을 들여 읽어보세요. cssweekly와 같은 좋은 사이트에도 가입해서 지속적인 뉴스를 업데이트 받아보세요. 그리고 주간 업데이트에 가입하는 거 잊지 마세요. 무료 튜토리얼과 Tuts+의 웹디자인에서 나오는 다양한 자료들을 만날 수 있습니다.

출처 : http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573