brunch

매거진 Framer 스터디

라이킷 4 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김세환 Dec 23. 2016

[Day 7] 이미지 필터 적용하기

30일간의 Framer.js 스터디

<그림. 필터가 적용되지 않은 이미지>

프레이머에서는 이미지에 적용할 수 있는 필터들이 있습니다. 필터들은 위의 표에 표시된 것처럼 여러 가지가 있습니다. 차근차근 적용해보면서 필터에 대해 알아보도록 하겠습니다.

필터 속성 보기

먼저 필터를 적용하기 위해서는 소스코드에서 이미지가 포함된 레이어의 좌측 속성 버튼을 클릭합니다. 그럼 가운데 속성 창 아래쪽에 Filters라는 메뉴가 보입니다. 이 메뉴를 클릭하면 아래로 확장되며 필터 속성들을 조절할 수 있게 됩니다.

Blur (흐림 효과)

<그림. Blur 효과를 적용한 이미지>

Blur는 이미지를 뿌옇게 보이게 하는 흐림 효과입니다. 프레이머에 속성 창에서 지원 가능한 범위는 0 ~ 50입니다.

Brightness (밝기)

<그림. Brightness 효과를 적용한 이미지>

Brightness는 이미지의 밝기를 나타내는 효과입니다. 기본값은 100이며 0으로 갈수록 어두워집니다. 값이 0이 되면 검은색으로 표시됩니다. 또한 프레이머에서의 최댓값은 300이며 원래 이미지보다 더욱 밝아집니다.

Contrast(명암)

<그림. Contrast 값을 줄인 이미지>

Contrast는 명암을 나타냅니다. 기본값은 100이고 줄어들수록 이미지의 명암차가 줄어들어 어둡게 보이게 됩니다. 프레이머의 속성 창에서 조절할 수 있는 값은 0~100이지만 소스코드상에서 200 , 300으로 더 높여서 색상을 더 왜곡해서 보이게 할 수도 있습니다.

Grayscale (회색 효과)

<그림. Grayscale을 적용한 효과>

Grayscale은 회색 효과를 나타냅니다. 수치는 기본값이 0으로 100이 되면 완전한 흑백으로 표시됩니다. 이 값은 이미지에 인터랙션 효과를 줄 때 많이 사용하는 값으로 잘 알아두시면 좋습니다.

hueRotate (색조)

<그림. 원형 색상표>

hueRotate는 색조를 나타냅니다. Rotate라는 말이 붙은 건 이 값의 기준이 원형으로 구성된 색상표이기 때문입니다. <그림>을 보시면 원형으로 색상들이 배치되어 있는 것을 볼 수 있습니다. 여기서 상단 중앙의 녹색을 기점으로 0도이며 반시계 방향으로 한 바퀴를 돌면 다시 360도가 됩니다. 그래서 hueRotate 값은 기준이 0이며 최댓값이 360인 것입니다.

<그림. 녹색 이미지>

색상 확인을 위해 예제 이미지를 잠시 없애고 배경색을 녹색인 화면을 만들어서 설명해 보겠습니다. <그림>이 현재 원형 색상 테이블의 0도에 위치한 녹색으로 되어 있습니다. 여기서 hueRotate 값을 90도로 만들면 어떻게 될까요? 아래 그림과 같이 원형 테이블의 중앙 상단의 녹색에서 반시계 방향으로 90도에 위치한 하늘색 계열의 색상으로 나타나게 됩니다.