CSS3를 이용한 이미지편집/효과주기(2D/3D)

이 강좌는 월간 w.e.b. HOW TO 2011년 04호에 게재되어 있습니다.

불과 몇 해 전까지만 해도 활성화 되지 않았던 모바일 관련 웹이 스마트폰이라는 인프라가 형성되면서 빠르게 발전하는 모습을 보이고 있으며 그 중심에 있는 구조화된 웹표준기술이 이슈가 되는 상황이 되었다. 또한 그에 따른 부가기술의 CSS도 기존버전에서 CSS3로 버전업이 되면서 더욱 영역을 확장해 나가는 모습을 볼 수 있다. CSS가 가지고 있는 많은 장점 중 한가지인 다양한 타이포그래피 만들기를 지난 연재에 진행했었는데 이번 호에서는 텍스트에서 더 나아가 개체 편집(이동/스케일변경/기울이기/회전)효과를 CSS3 속성을 가지고 기본적인 사용방법을 익혀보고 다양한 예제를 통해 응용해 보도록 하겠다. 그리고 번외 성격의 예제로 ‘버튼에 디자인적인 요소를 넣어 다양하게 활용 할 수 있는 효과’를 표현하는 방법을 알아보자.

지난 시간에 기본적인 편집관련 속성들을 알아보았기 때문에 이번 시간엔 더 이해하기 쉽고 예제를 따라 해 보기 쉬울 것으로 예상된다.

연재순서

  1. CSS 선택자(Selector)의 종류 및 간단한 효과주기
  2. CSS3를 이용해 다양한 타이포그래피(Typography) 만들기
  3. CSS3를 이용한 이미지 편집/효과주기(2D/3D)
  4. 플래시보다 쉽게 구조화되고 다이내믹한 메뉴 만들기
  5. 툴을 이용하여 애니메이션을 만들어보자!

1. 개요

CSS를 이용하여 이미지편집을 한다면 어떤 점이 좋을까? 예를 들어 매일매일 발행되는 인터넷일간지가 있다고 하자. 그곳에 촌각을 다투어 매일 새로운 기사가 올라오고 거기에 따른 새로운 여러 가지 이미지 컨텐츠도 올라온다고 생각해 보면 컨텐츠를 제작,등록하는 사람의 업무는 상당히 많을 수 있을 것이다. 그런 업무에 효율적인 업무향상을 위하여 최적화된 컨텐츠 등록 프로세스는 두말할 나위 없이 필요하다. 그 중 여러 종류의 이미지 컨텐츠를 다양한 디바이스 환경에서 보여주려면 일련의 컨텐츠 가공이 필요하다. 여기에서 CSS를 잘 활용한다면 디자인을 최대한 살리면서 다양한 디바이스와 소비자의 욕구에 부합된 컨텐츠를 더욱 쉽게 제공 할 수 있을 것이다.

CSS3를 이용한 이미지편집효과 장점

  1. 같은 효과가 많은 경우 지정된 선택자의 수정만으로 동일 선택자의 모든 요소들이 적용되므로 이미지 편집작업의 시간단축과 그에 따른 비용절감효과. (유지보수 저비용 고효율)
  2. 사용자 또는 관리자가 올린 원본 소스가 별다른 작업 없이 실제 폼에 적용됨.
  3. CSS코드 수정만으로 다양한 효과 및 표현이 가능하다.

예제 실습하기에 앞서 본 강좌에서는 자바스크립트는 제외하기로 하고 되도록이면 HTML마크업과 CSS만으로 예제를 꾸며 보았다. 기존에 자바스크립트를 배운 독자들은 진행할 예제에 추가로 다양한 동작의 코드도 적용시켜보면 또 다른 학습이 될 수 있을 것이다.

2. 이번 연재의 CSS3 주요속성

이번 연재의 핵심은 transform 속성인데 W3C 개발그룹에서는 2D와 3D 모듈로 개발되고 있다. 현재 2D/3D transfom 속성은 같은 웹킷엔진을 쓰는 구글크롬, 사파리가 서로 상이한 랜더링을 보여주고 있다. 그러므로 본 강좌에서는 기본은 크롬에서 테스트를 하되 표현이 되지 않는 부분은 사파리를 이용하여 예제결과를 확인 할 것이다. (예제는 구글 크롬 9.0.X 및 사파리 5.0.4에서 테스트하였다.)

transform은 개체 편집(이동/스케일변경/기울이기/회전)의 가장 기본적인 속성으로 아래의 내용을 알아두고 사용해 보자.

2D – transform 속성

구분 설명
세부함수 translate(X축 이동,Y축 이동), scale(수치), skew(각도), rotate(각도),
[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
초기값 50% 50%
적용 블록 & 인라인 요소
상속 없음
비율 요소의 박스 크기를 참조
미디어 시각
계산 값 <가로><세로><번짐크기>,<색상>

3D – transform 속성

3D 형태의 공간을 정의하는 방법으로 표시하며 관점 및 기준점 및  X,Y,Z 축을 다루는 속성 및 함수로 구성된다.

구분 설명
세부함수 matrix, matrix3d, translate, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, skewZ, perspective
none | <transform-function> [ <transform-function> ]*
초기값 50% 50% 0
적용 블록 & 인라인 요소
상속 없음
비율 요소의 박스 크기를 참조
미디어 시각
계산 값 <가로><세로><번짐크기>,<색상>

그 외 속성은 아래와 같다.

transform-origin, transform-style, perspective, perspective-orgin, backface-visibility
이미지 편집 툴에서 흔히 볼 수 있는 transform 기능은 CSS만으로도 개체를 마치 자유자재로 편집하는 듯한 효과를 제공한다.

그럼 기본적인 transform 속성의 사용법을 익혀보도록 하자.

2-1) 원본이미지



2-2) translate 예제

개체의 위치를 변경할 수 있으며 입력된 XY축 수치만큼 위치가 이동한다.

아래 코드는 X축으로 200px Y축으로 50px 만큼 이동한다.

img{
	-webkit-transform:translate(200px, 50px);
	transform: translate(200px, 50px);
}

2-3) rotate 예제

개체를 회전할 수 있으며 입력된 각도만큼 시계방향으로 회전하며 값이 –일 경우 반시계방향으로 회전한다.

img{
	-webkit-transform: rotate(45deg); /* 반시계 방향은 –값을 주면 됨-45deg */
	transform: rotate(45deg);
}

2-4) scale 예제

개체의 사이즈를 변경 할 수 있으며 1을 기준으로 보다 크면 스케일이 커지고 더 작을 경우 스케일이 줄어든다.

img{
	-webkit-transform: scale(1.6);/* 스케일 값이 1이 기준 * /
	transform: scale(1.6);
}

2-5) skew 예제

개체를 기울기를 할 수 있으며 XY축 별로 줄 수도 있고 하나의 속성으로 XY축 모두 줄 수 있다. +각도는 시계(우측)으로 기울이고 –각도는 반시계(좌측)방향으로 기울인다.

img{
-webkit-transform: skew(-20deg,-20deg); /* +각도는 시계방향 – 각도는 반시계방향 */
transform: skew(-20deg,-20deg);
}

2-6) 확장 예제

지금까지 알아본 여러 개의 함수를 하나의 transform에 일렬로 나열하여 표시가 가능하며 순서대로 적용 된다.

img{
  -webkit-transform: translate(10px, 10px) rotate(10deg) scale(1.2)
  skew(10deg, 0deg); /* 여러가지 함수를 하나의 transform에 나열하여 표시 */
  -webkit-transform-origin: 10% 10%;
  transform: translate(10px, 10px) rotate(10deg) scale(1.2) skew(10deg, 0deg);
  transform-origin: 10% 10%;
}

현재 CSS3에서는 이미지 편집 및 효과를 주기 위해 2D/3D 각각의 모듈이 개발되고 있으며 기본명세는 아래에서 확인 할 수 있다.

Transform 2D : http://www.w3.org/TR/css3-2d-transforms/
Transform 3D : http://www.w3.org/TR/css3-3d-transforms/

3. CSS와 이미지를 활용한 2D/3D 예제

이제 기본적인 2D용 transform사용법을 알아보았다. 이미 배운것만으로도 여러가지를 한꺼번에 나열하여 사용한다면 꽤 괜찮은 결과물을 얻을 수 있을 것이고 추가로 아래의 예제를 하나씩 따라하다 보면 CSS의 매력에 점점 빠져들게 될것이다.

3-1) 2D transform 및 transition을 활용한 다이나믹한 갤러리 효과
3-2) 3D transform을 이용한 입체적인 박스모양

3-1) 다이나믹한 갤러리 효과

우선 본인이 원하는 개수만큼의 이미지를 준비한다. 필자는 5개의 썸네일형 jpg이미지를 준비하고 상대적으로 큰 이미지를 보여줄 때도 5개의 이미지를 활용하여 단순히 이미지 사이즈만 변경하여 보여줄 것이다. 독자들은 큰 이미지도 개별적으로 만들어 놓으면 더 좋은 효과를 볼 수 있을 것이며 아래 소스를 활용하여 다양한 다른 형태의 갤러리를 만들어 보자.

Step 1. HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<title>gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	적용할 CSS 들어가는 곳
</style>
</head>v
<body>
<div id="gallery">
	<ul>
		<li>
			<img src="images/ex1_01.jpg" class="thumbnail" alt="" />
			<img src="images/ex1_01.jpg" class="source" alt=""/>
		</li>
		<li>
			<img src="images/ex1_02.jpg" class="thumbnail" alt="" />
			<img src="images/ex1_02.jpg" class="source"  alt="" />
		</li>
		<li>
			<img src="images/ex1_03.jpg" class="thumbnail" alt="" />
			<img src="images/ex1_03.jpg" class="source"  alt="" />
		</li>
		<li>
			<img src="images/ex1_04.jpg" class="thumbnail" alt="" />
			<img src="images/ex1_04.jpg" class="source" alt="" />
		</li>
		<li>
			<img src="images/ex1_05.jpg" class="thumbnail" alt="" />
			<img src="images/ex1_05.jpg" class="source"  alt="" />
		</li>
	</ul>
</div>
</body>
</html>

마크업을 할 때 항상 고려해야 할 부분은 얼마나 구조적이며 의미에 맞게 구현하느냐이다. HTML 마크업은 배경이 될 부분엔 DIV로 감싸고 그 안에 갤러리 리스트는 순서 없는 <ul> 을 사용하고 각 <li>에 썸네일 이미지와 소스 이미지를 넣었다.

Step 2. CSS

/* 갤러리 배경 */
#gallery {
	display:inline-block;
	padding:20px;
	background: #666;
	-webkit-box-shadow: #333 3px 3px 6px; /* webkit용 */
	-moz-box-shadow: #333 3px 3px 6px; /* 모질라 Firefox용 */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#333',
 Direction=135, Strength=3); /* IE용 */
	box-shadow: #333 3px 3px 6px; /* 표준 box-shadow를 지원하는 브라우저용 */
}
#gallery ul{
	margin:0;
	padding:0;
	display:inline-block;
}
#gallery ul li {
	/* 썸네일 이미지 간격 및 위치 조정 */
	float:left;
	list-style:none;
	display:inline;
	padding:5px;
}
#gallery .thumbnail{
	/* 썸네일 이미지 사이즈 및 테두리 */
	width:100px;
	height:100px;
	border:2px solid #aaa;
	cursor:pointer;
}
/* 애니메이션 효과 */
#gallery .source{
	-webkit-transition: all 0.2s ease-in-out ; /* webkit용 */
	-webkit-transform:translate(0px, 106px);
	-moz-transition: all 0.2s ease-in-out; /* 모질라 Firefox용 */
	-o-transition: all 0.2s ease-in-out; /* 오페라용 */
	opacity:0; /* 처음 시작할때 투명도*/
	position:absolute;
	margin-left:-104px;
	border:5px solid #ccc;
	-webkit-box-shadow:#333 3px 3px 6px; /* webkit용 */
	-moz-box-shadow:#333 3px 3px 6px; /* 모질라 Firefox용 */
	filter:progid:DXImageTransform.Microsoft.Shadow(color='#333',
 Direction=135, Strength=3);  /* IE용 */
	box-shadow:#333 3px 3px 6px; /* 표준 box-shadow를 지원하는 브라우저 */
	visibility:hidden; /* 처음 로딩시 보이지 않게 표시 */
}
/* 썸네일 이미지에 마우스 올렸을때 나오는 소스이미지 사이즈 조절 */
#gallery li:hover .source {
	width:150px;
	height:150px;
	opacity:1; /* 투명도*/
	visibility:visible;
}

Step 3. 적용결과

로딩 할때

마우스 롤오버 할때

실질적인 썸네일 위로 마우스 롤오버 시 이미지가 움직이면서 투명도가 불투명 되며 아래로 나타나는 애니메이션 효과를 볼 수 있을 것이다.

3-2) 3D transform을 활용한 Cube 만들기

Step 1. HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<title> 3D Cube </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	적용할 CSS 들어가는 곳
</style>
</head>
<body>
	<div id="cube">
		<div class="top">1 Top</div>
		<div class="front">2 Front</div>
		<div class="right">3 Right</div>
		<div class="back">4 Back</div>
		<div class="left">5 Left</div>
		<div class="bottom">6 Bottom</div>
	</div>
</body>
</html>
body{
	padding:200px;
}
/* 큐브의 6개의 각 면을 채울 기본속성 정의(사이즈, 폰트) */
#cube div {
	position: absolute;
	height: 160px;
	width: 160px;
	padding:20px;
	text-align:center;
	font-size:30px;
	color:#fff;
	background-color: rgba(0, 0, 0,.5); /* 면 배경색상 .5는 투명도가 0.5임 */
}
#cube {
	/* 원근의 관점 - 값이 작을 수록 길이가 길어진다. */
	-webkit-perspective: 800;
	/* 3D의 기본이 되는 원근의 기준점*/
	-webkit-perspective-origin: 50% 600px;
}
/* top으로 시작해서 bottom까지 6면체의 모양을 표시 */
#cube .top {
	/* 90도 각도로 X축 회전하고 Z축으로 100px만큼 이동 */
	-webkit-transform: rotateX(90deg) translate전(100px);
}
#cube .front {
	/* Z축으로 100px만큼 이동 */
	-webkit-transform: translateZ(100px);
}
#cube .right {
	/* 90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
	-webkit-transform: rotateY(90deg) translateZ(100px);
}
#cube .back {
	/* 180도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
	-webkit-transform: rotateY(180deg) translateZ(100px);
}
#cube .left {
	/* -90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
	-webkit-transform: rotateY(-90deg) translateZ(100px);
}
#cube .bottom {
	/* -90도 각도로 X축 회전하고 Z축으로 100px만큼 이동한 후 다시 180도 회전 */
	-webkit-transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
}

Step 3. 적용결과

본 예제는 확인 가능한 브라우저 사파리 5.0.4에서 테스트 하였다.

-webkit-perspective-origin: 50% 600px; 에서 50%가 +일 경우 왼쪽을 기준으로 오른쪽으로 작아지며 -값이면 오른쪽을 기준으로 왼쪽으로 작아지게 된다.

4. CSS를 활용하여 라운드 버튼 만들기

이번호 주제에는 벗어나지만 HTML과 CSS를 공부하면서 나름 다들 한번씩은 느끼는 고민이 버튼을 제작 할 때가 아닌가 싶다. 일반적으로 버튼은 4가지 방식으로 제작 가능하며 아래와 같은 리스트로 표시 할 수 있다.

  1. 브라우저에 내장된 기본 버튼컨트롤 사용
  2. 각각의 다른 이미지(jpg,gif,png)를 버튼으로 사용
  3. CSS와 스프라이트 기법을 적용 큰 버튼용 배경이미지를 가변적으로 사용하고 title은 텍스트로 사용
  4. CSS만을 사용하여 이미지버튼효과를 나타낸 버튼

*스프라이트(sprite) 기법: 버튼과 아이콘의 표현을 위해서 주로 사용하는 기법으로 웹사이트에서 이미지 로딩시 적은 용량들의 파일 여러 개를 다운로드 하는 것 보다 하나 또는 적은 수의 이미지로 제작하는 방식으로 로딩시 깜빡거리는 현상 및 웹사이트 최적화에 필요한 구현방식이다.

현재 추세는 2번에서 3~4번으로 가는 과도기적인 시기이다. 점점 후자의 비중이 높아지고 있기 때문에 이중에서 4번에 대하여 알아볼 것이다. CSS와 배경이미지를 이용한 좀 더 디자인적인 버튼은 일반 이미지로 사용할 때 보다 개발 프로세스를 빠르게 진행 시킬 수도 있고 보다 간편한 수정작업 및 적용을 하기 위하여 사용한다.

우선 버튼을 제작하기 전에 먼저 고민해야 할 것이 있다. 어떤 모양의 버튼을 만들 것이며 어떤 기술적인 어려움이 있는지 확인해야 할 것이다. 이제부터는 라운드 버튼을 만들것인데 이미지 없이 최대한 CSS를 이용하여 제작할 것이다. 이미지처럼 보이는 효과는 rgba 색상 값을 적절히 사용하여 버튼 테두리 및 텍스트를 디자인 할 것이고 입체감이 느껴지도록 그림자를 맨 나중에 추가할 것이다.

어떤 front 컬러와 back 컬러가 조화를 잘 이루고 있는지 염두 해 두고 제작을 한다면 좀 더 멋지고 크리에이티브한 디자인 버튼을 만들 수 있을 것이다.

아래는 기본적인 HTML마크업이다.

Step 1. HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<title>button</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	적용할 CSS 들어가는 곳
</style>
</head>
<body>
	<button>List</button>
	<button>modify</button>
	<input type="button" value="Register" onclick="">
	<input type="reset" value="reset" onclick="">
</body>
</html>

그럼 위에 것을 기준으로 CSS코드를 작성해 보겠다.

Step 2. CSS

input, button{
	display: inline-block;
	padding:5px 15px;
	font-weight:bold;
	border:1px solid rgba(0,0,0,0.4);
	border-radius: 15px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	cursor: pointer;
	color: #000;
}
  input:hover, button:hover{
	border-radius: 5px;
color: #fff;
background:#999;
}
  input:hover, button:active{
	border-radius: 5px;
	color: #fff;
	background-color: #00c0ff;
}

Step 3. 적용결과

CSS로 만드는 버튼 – 기본

기본 형태로 버튼에 padding값을 주고 테두리에 border값을 주었으며 CSS3 속성인 border-radius에 15px로 주어 양쪽 테두리 부분이 둥글게 라운드처리를 하였다.

CSS로 만드는 버튼 – 마우스 Over 시

border-radius 값을 5px로 변경하고 배경 색상을 #999로 변경하여 위의 이미지와 같이 좀 더 사각형 모양으로 변경 되었으며폰트 색상도 흰색으로 변경 하였다였다.

CSS로 만드는 버튼 – 마우스 Click 시

마우스 active시 텍스트 및 배경색상이 바뀌는 효과를 나타나게 하였다.

아래와 같이 버튼의 색상을 변경하려면 해당 클래스에 내용을 추가한다.

/* code */
	color: #fff;
	background-color: #00c0ff;

5. 마치며

지금까지 다양한 개체 편집을 위한 CSS3의 transform 관련 속성들과 여러 가지 함수들을 다루어 보았다. 처음 본 연재를 접한 독자라면 일단 웹킷 계열에서 적용 되는 내용이라는 것을 알아야 쉽게 테스트를 해 볼 수 있을 것이다. 위에 예제를 잘 활용한다면 이미지만 사용한 사이트보다 보다 유연하고 관리 및 수정이 용이한 좋은 결과물을 얻을 수 있을 것이며 CSS 활용으로 좀 더 다양한 UI개발 방법을 찾을 수 있을 것이다.

마지막 5회차에 학습할 애니메이션도 이번 예제가 기초가 될 것이며 여기에 HTML5에 있는 canvas 태그와 함께 사용한다면 날개를 달 수 있을 것이다.

다음 연재에서는 “플래시보다 쉽게 구조화되고 다이내믹한 메뉴 만들기”라는 주제를 가지고 플래시와 같은 오브젝트 형식의 컨텐츠를 사용하지 않고 HTML 마크업 만으로 DOM 구조에 맞게 구성하면서 보다 다이내믹한 메뉴를 만들어 볼 것이다.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.
  • Pingback: 툴을 이용하여 애니메이션을 만들어보자! | Clearboth()

  • gore

    IE를 쓰지 못하도록 사이트에서 막아버리면 좋을텐데 말이죠.
    브라우저를 다른거 쓰고 싶어도 IE를 써야 할 때도 있죠.
    바로 금융이 이루어지는 사이트죠.
    쇼핑, 은행, 주식, 기타 결제 등…
    우리나라에선 돈이 오가는 사이트들은 IE에서만 정상작동하는게 대부분입니다. 뉴스사이트도 한 몫하고요.
    차라리 그런 기업들이 IE종속을 막고 브라우저를 IE가 아닌 국제표준을 지향하는 브라우저로 갈아타게끔 유도한다면 충분히 가능할 것 같습니다.
    보안프로그램 설치같은건 설명 잘해놓는데 그런걸 못할리는 없을겁니다.