프론트엔드 개발을 위한 기초 디자인 개념

시작하면서

프론트엔드 개발을 위한 기초 디자인 개념을 정리합니다.

색상의 개념과, 포토샵에서 웹 시안을 만들 때의 주의사항 등을 정리합니다.

 

 

색의 3원색과 빛의 3원색

색의 3원색?

• 색의 3원색은 CMYK(Cyan / Magenta / Yellow / blacK) 로도 표현합니다.
• 3원색은 Cyan(청록색) Magenta(자홍색) Yellow(노란색) 입니다.
• 인쇄와 같이 염료를 사용할 때 주로 사용됩니다.
• 전부 쌓이면 검정이 됩니다.

빛의 3원색?

• 빛의 3원색은 RGB(Red / Green / Blue) 로도 표현합니다.
• 3원색은 Red(빨강) Green(녹색) Blue(파랑) 입니다.
• 말 그대로 빛을 이용하기 때문에 웹 환경에서 사용하기 적합합니다.
• 전부 쌓이면 하얀색이 됩니다.

 

단위

단위는 cm, mm, in, px, pt 등을 말합니다. 

 

대부분 만들어 내야 하는 작업에 따라 단위를 변경하지만,

웹 사이트 시안을 만들기 위해서는 디지털 이미지를 구성하는 단위인 px 사용을 권장합니다.

 

 

해상도 DPI PPI

DPI?

DPI(Dots Per Inch)는 프린터로 출력되는 이미지를 나타낼 때 사용하는 해상도 표현 단위입니다.

보통 출력물은 300 DPI 이상으로 작업합니다.

 

PPI?

PPI(Pixel Per Inch)는 웹사이트 시안과 같은 디지털 이미지를 작성할 때 사용하는 해상도 표현 단위입니다.

보통 웹 사이트를 위한 이미지는 72 ppi 로 작업합니다.

 

+) 왜 꼭 72ppi 일까?

디스플레이가 가진 해상도 이상으로 이미지를 표현하긴 어렵기 때문에 불필요하게 해상도를 높여 용량을 높일 필요는 없습니다.

 

 

그 밖의 주의 사항

웹 사이트를 위한 웹 디자인 시안은 일관성을 유지하는 것이 좋습니다.

예를 들어 100px 을  두 레이아웃으로 나눈다면 50px 50px 으로 나누는 것이 코드를 작성할 때 용이합니다.

 

 

정리하자면,

기본 색상 설정은 RGB

기본 단위 설정은 px

해상도는 72 ppi

코드 작성시 편리함을 위해 공백 등의 레이아웃 배치 일관성 가지기

 

을 주의하면서 디자인 초안 작업을 시작해야 합니다.

 

 

마무리하며

아주 기초적인 디자인 개념을 배워보았습니다!

 

댓글 공감은 항상 환영입니다!