'분류 전체보기'에 해당되는 글 98건

김프의 키보드 단축키를 포토샵에서 사용하는 것처럼 수정하였다면 다음으로는 프로그램의 레이아웃도 포토샵처럼 바꾸면 (상대적으로) 더 편해질 듯 합니다. 

먼저 김프의 레이아웃이 '단일창 모드'로 되어 있는지 확인합니다. 설치했을 때의 기본값은 작업창과 도구창이 별도로 분리되어 있기 때문입니다.

김프 단일창 모드 적용

선택영역을 레이어로 만드는 기능 추가

포토샵에는 있고 김프에는 없는 기능인 "Layer via Cut"을 구현하기 위해 플러그인도 설치합니다. 이 기능은 선택영역을 새로운 레이어로 만들 때 매우 편리하게 사용할 수 있습니다.

먼저 플러그인 홈페이지에서 관련 플러그인을 찾아봅니다.

http://registry.gimp.org/node/26396

김프 플러그인 검색

플러그인이 검색되면 배포되는 홈페이지에서 파일을 다운로드 받습니다.

http://some-gimp-plugins.com/contents/en/extensions/002/

플러그인 다운로드 페이지

다운로드 받은 파일의 압축을 풀고, 생성된 파일들을 클립보드에 복사(ctrl+c)한 후 김프 플러그인 폴더(C:\Users\유저이름\.gimp-2.8\plug-ins)에 붙여 넣습니다.

플러그인 폴더에 파일 넣기

김프가 열려있다면 프로그램을 닫고 다시 실행시킵니다.

레이어 메뉴 하단에 Layer via Copy와 Layer via Cut 기능이 추가된 것을 확인할 수 있습니다.

Layer via Copy & Cut 기능 확인

유저 인터페이스 변경

김프는 테마(스킨) 기능를 지원하고 있습니다. 그렇기 때문에 UI 변경을 쉽게 할 수 있습니다. 인터넷 검색을 통해 김프에서 사용할 수 있는 포토샵 인터페이스 테마를 다운로드 받습니다.

http://gnome-look.org/content/show.php/?content=159293

포토샵 아이콘 테마

포토샵 아이콘 테마 적용 모습

다운로드 받은 파일의 압축을 풀고 이 파일들은 김프 설정 폴더(C:\Users\유저이름\.gimp-2.8)에 붙여 넣습니다. 몇몇 설정 파일을 덮어 쓰게 됩니다.

파일 복사 후 김프 설정 폴더에 붙여넣기

김프가 열려있다면 프로그램을 닫고 다시 실행시킵니다.

테마가 적용되어 도구 아이콘이 변경된 것을 확인할 수 있습니다.

도구 아이콘 변경 확인

만일 변화가 없다면 상단 메뉴에서 <편집> - <기본설정>을 클릭하고 테마 항목에서 "PsIcons"를 선택 후 [확인] 버튼을 클릭합니다.

테마 설정 창

테마를 적용한 후 레이아웃을 정리하기 위해 상단 메뉴 중 <창> - <도킹 가능한 대화> 중 사용할 대화 상자를 선택하여 불러옵니다.

각종 대화상자 열기

불러온 창들은 마우스 드래그&드롭으로 프로그램 창의 좌우측 패널 영역으로 이동시킬 수 있습니다.

대화상자 레이아웃 수정

또한 각 패널 좌측 상단의 화살표 버튼을 클릭하여 "탭 추가"를 통해 대화 상자를 추가할 수 있습니다.

패널 옵션 버튼으로 탭 추가

이렇게 프로그램의 레이아웃을 수정한 후 이를 고정시키기 위해서 <편집> - <기본 설정>을 열고 "도구 옵션" 항목에서 "마칠 때 도구 옵션 저장(S)"를 체크한 후 [확인]을 클릭합니다.

도구 옵션 저장

김프 레이아웃 정리 완료

김프가 포토샵의 기능에 비해 아무래도 한 수 딸리는 것은 어쩔 수 없는 사실입니다. 하지만 활용하기에 따라 포토샵에 못지 않은 활약을 보일 수도 있습니다. 김프 고유의 인터페이스도 나쁘지 않지만 만일 자신이 포토샵 사용법이 더 익숙한 상태에서 김프를 사용해야 한다면 이와 같이 테마 설치와 환경 설정을 통해 프로그램 활용성을 높이는 것도 좋은 방법일 것입니다.

포토샵 사용자가 김프를 사용하게 되었들 때의 첫번째 만나는 난관은 포토샵과 다른 단축키를 사용하는 부분에 있어서의 혼동일 것입니다. 하지만 다행히 대부분의 프로그램들처럼 김프도 자체적인 단축키 편집기능이 있기 때문에 이를 포토샵에서의 단축키처럼 설정하는 것만으로도 작업에 있어서 그 속도를 붙이는데에 크게 도움이 됩니다(또한 그 반대로 김프를 통해 그래픽 디자인에 입문한 사용자라 하더라도 차후 포토샵으로 작업을 하게 될 때에도 도움이 되기도 할 것입니다).

먼저 김프의 여러 설정파일들이 위치하고 있는 폴더를 찾습니다. 김프는 실행파일 - exe가 있는 폴더과 데이터 폴더가 서로 다르기에 주의합니다.

Windows의 경우

C:\Users\[your user name]\.gimp-2.8

Windows7 김프 데이터 및 설정 폴더

OSX의 경우 : ~/Library/Application Support/GIMP/2.8/

단축키를 바꾸기 위해서 직접 일일히 바꾸기에는 시간도 걸리고 혹시 모를 실수가 있을 수도 있기 때문에 아래의 홈페이지에서 설정이 적용된 단축키 파일(ps-menurc)을 다운로드 합니다.

김프 단축키 설정창

http://epierce.freeshell.org/gimp/gimp_ps.php

ps-menurc 파일 홈페이지

링크에서 마우스 우측 클릭을 한 후 "다른 이름으로 링크 저장"을 통해서 ps-menurc.txt 를 다운로드 받을 수 있습니다.

ps-menurc.txt 다운로드

김프가 열려 있다면 먼저 프로그램을 닫습니다.

그리고 .gimp-2.8 폴더에서 "menurc" 파일의 이름을 "menurc-original"로 수정하고, 다운로드한 "ps-menurc.txt" 파일을 폴더에 넣은 후 <F2> 키를 눌러 파일 이름을 "menurc"로 수정합니다(윈도우의 경우 확장자도 삭제).

.gimp-8.2 폴더에 설정 파일 넣기

김프 프로그램을 실행하여 키보드 단축키가 포토샵처럼 설정된 것을 확인합니다.

김프 단축키 포토샵처럼 변경

이처럼 단축키를 포토샵처럼 변경하여 기존의 포토샵 사용자가 작업을 좀 더 수월하게 할 수 있습니다. 다음 포스팅에서는 김프의 레이아웃을 포토샵과 비슷하게 바꿔볼 것입니다.

http://underscores.me/ 에서 언더스코어스 테마(워드프레스 스타터 테마)를 다운로드 합니다. 텍스트 입력 폼에 생성할 테마의 이름을 정해 입력을 하고 GENERATE 버튼을 클릭하면 됩니다.

언더스코어스 홈페이지

다운로드된 압축파일을 풉니다.

언더스코어스 테마 파일

http://getbootstrap.com/getting-started/#download 에서 부트스트랩 프레임워크를 다운로드 합니다.

Download Bootstrap

다운로드 된 파일의 압축을 풉니다. 압축이 풀어진 폴더를 클립보드에 복사(ctrl+c)한 후 언더스코어스 테마 폴더(직접 설정한 테마명)에 붙여넣고, 폴더명을 'bootstrap'으로 수정합니다(예: bootstrap-3.3.6-dist를 bootstrap으로 수정).

부트스트랩 압축 파일 풀기

언더스코어스 테마에 부트스트랩 폴더 붙여넣기

테마 파일 폴더에 있는 미리보기 이미지 'screenshot.png' 파일을 포토샵, 김프 등의 이미지 편집기를 사용하여 편집하고 저장합니다.

그래픽 프로그램에서 screenshot.png 파일 편집

screenshot.png 편집 완료

언더스코어스 테마 폴더에 있는 PHP 파일 중에서 functions.php 파일을 텍스트 에디터에서 엽니다.

functions.php 파일

functions.php 파일의 코드 가장 아래에 다음의 소스 코드를 붙여 넣습니다.

/**
 * Add Bootstrap3 style and script
 */
function bootstrap_styles() {
wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.css');
wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'bootstrap_styles');

부트스트랩 추가 소스 코드

먼저 새로운 텍스트 레이어를 만들어봅니다.

좌측의 '툴 박스(도구 상자)'에서 'A' 아이콘이 '텍스트 도구'입니다. 이를 클릭하고 하단의 '텍스트 도구 옵션' 패널에서 글꼴과 크기 등을 미리 설정하고 문서 내 임의의 위치에 클릭한 후 글자를 입력합니다.

김프 - 텍스트 입력

텍스트 크기 조정을 위해 텍스트를 더블클릭하거나 드래그하여 블록으로 잡고 대화 상자의 텍스트 크기 수치를 조정합니다.

김프 - 텍스트 크기 수정

좌측 '툴 박스'에서 '이동 도구'를 선택하고 텍스트의 위치를 이미지의 중앙에 오도록 움직여줍니다. '정렬 도구'를 사용해도 되지만 여기서는 대충 이동하겠습니다(도구 옵션의 체크를 잘 확인합니다 - '현재 레이어 이동'을 추천합니다).

김프 - 레이어 이동

상단 메뉴바에 있는 '레이어' 항목을 클릭하면 제일 아래에 'Layer Effects'가 등록된 것을 확인할 수 있습니다. 마우스 커서를 'Layer Effects'로 이동하여 하단 메뉴 중에서 가장 아래에 있는 스트로크(stroke-테두리)를 클릭합니다.

김프 - 레이어 이펙트 적용

스트로크 옵션 대화 상자에서 여러 옵션들을 살펴보고 적당한 수치를 넣어 텍스트에 효과가 적용되는 것을 확인합니다.

- Size : 테두리 두께

- Position : 테두리 위치 (0=외곽선 안쪽, 50=외곽선 중간, 100=외곽선 바깥쪽)

- Blend Mode : 하단 레이어와 색이 혼합되는 방식의 종류

- Opacity : 불투명도

- Fill Type : Color(단일 색상), Gradient(연속 색상), Pattern(패턴 이미지)

- Merge with layer : 효과 적용 후 레이어를 하나로 병합 (효과 적용 후 수정 불가능 - 체크 비추천)

- Preview : 효과 적용 모습 미리보기 (체크 추천)

김프 - 레이어 이펙트 - 스트로크 옵션

김프 - 스트로크(테두리) 적용

효과가 적용된 텍스트를 이동기키려면 그룹 레이어(튤립-with-stroke)를 이동시켜야합니다. 레이어를 선택이 잘못되면 엉뚱한 레이어가 이동하므로 주의해야 합니다.

김프 - 그룹 레이어 이동

입력된 텍스트를 수정하기 위해서는 텍스트 레이어를 더블 클릭하여 수정하면 됩니다. 그러나 효과는 원래의 텍스트에 적용된 것에서 변하지 않기 때문에 다시 적용해야 합니다.

김프 - 레이어 이펙트 수정 한계점

김프 - 작업취소(ctrl+z) 후 효과 다시 적용

아직 포토샵의 레이어 스타일 기능에 비해서는 부족한 면이 있습니다만 그래도 상당히 근접한 결과물을 보여주고 있습니다. 오픈소스이자 무료로 공개되어 있는 그래픽 프로그램인 김프(GIMP)를 잘 사용하면 별도의 비용 부담을 줄이면서도 만족스러운 결과물을 얻을 수 있을 것입니다.

가장 널리 사용되고 있는 그래픽 프로그램이라면 단연코 '포토샵'이라는 것은 대부분의 컴퓨터 사용자라면 고개를 끄떡이면서 동의할 것입니다. 간단한 아이콘 제작부터 광고용 합성 이미지는 물론 SF 영화에서의 특수효과 합성에도 사용되는 말 그대로 '맥가이버의 만능 칼'과 같은 프로그램이죠.

하지만 그 뛰어난 기능 만큼 그 가격도 뛰어나기 때문에 선뜻 구매하기가 어려운 것도 사실입니다. 어도비의 CS6(Creative Suit 6 - 크리에이티브 슈트 6) 이후로는 CC(Creative Cloud - 크리에이티브 클라우드)로 바뀌면서 마치 월정액 온라인 게임을 하듯이 계정을 만들고 프로그램 사용료를 결재하는 방향으로 구매 방법이 바뀌었기 때문에 한방에 목돈이 나가지는 않지만 그래도 포토그래피 서비스의 경우 월 11,000원이라는 비용이 듭니다.

포토샵 월정액

업무에 항상 포토샵을 사용해야 하는 경우라면 굉장히 저렴한 비용으로 최고의 프로그램을 사용할 수 있지만(어도비도 포토샵 사용자가 아주 많기 때문에 포토샵 사용 금액은 다른 프로그램에 비해 저렴하게 책정한 듯 합니다) 그냥 아주 가끔 이미지 크기 조정, 글자 넣기 정도만 사용하는 평범한 컴퓨터 사용자라면 약간은 망설여질 수도 있을 수 있겠네요.

이런 분들을 위한 그래픽 프리웨어들이 꽤 많지만 그 중에서 가장 널리 알려진 프로그램이라고 한다면 바로 '김프'입니다.

김프(GIMP) 인스톨 화면

'김프'는 포토샵에서 지원하는 기능들의 상당 부분(레이어, 패스, 필터, 알파채널, 브러시 등)을 지원하고 있으며 사용하기에 따라서는 전문적인 영역(웹, 그래픽)에서도 사용할 수 있을만한 결과물을 낼 수도 있습니다. 단지 포토샵과는 프로그램의 레이아웃과 사용법이 꽤나 다르기 때문에 적응이 조금 힘들 뿐이죠.

김프(GIMP) 레이아웃

'김프'를 기본 설치한 후 살펴보면 포토샵에서는 지원하는 강력한 기능인 '레이어 스타일(Layer Style)'이 없는 것을 알 수 있습니다. 입체, 그림자, 테두리 등의 효과를 쉽게 넣을 수 있는 이 기능은 포토샵으로 아이콘이나 웹 요소들을 제작하는데에 이제는 없어서는 안되는 기능이입니다. 그렇기 때문에 '김프'에서도 이를 구현할 수 있으면 (사용법에는 차이가 좀 있더라도)보다 작업이 편해집니다.

"gimp layer style plug in"의 키워드로 구글링을 하면 몇 개의 검색 결과를 볼 수 있는데 그 중 "LayerFX for Gimp 2.8 – GIMP Scripts"를 클릭하여 이동합니다.

구글에서 김프 플러그인 검색

이동한 홈페이지에서 "LayerFX for 2.8 (Python-Fu)" 버전을 다운로드 받습니다.

김프 플러그인(LayerFX) 다운로드

'김프'가 실행되어 있는 상태라면 프로그램을 종료하고, 다운로드 받은 파일 "layerfx.2.8.py"를 '김프'의 'Plug-ins' 폴더에 넣습니다. 플러그인 폴더는 설치 옵션을 수정하지 않은 윈도우7 기준으로 "C:\Users\사용자명\.gimp-2.8" 안에 있습니다.

김프 플러그인 폴더 위치

이제 '김프'를 실행하고 상단 메뉴바의 [레이어]를 클릭한 후 풀다운 메뉴의 가장 아래에 있는 [Layer Effects]에 마우스 커서를 이동하면 포토샵의 레이어 스타일과 비슷한 기능들을 레이어에 적용할 수 있습니다.

김프 레이어 이펙트 활성화

여기까지 '김프'에서의 '레이어 스타일(이펙트)' 플러그인 설치에 대해서 알아보았으며 다음 포스팅에서는 이펙트의 사용에 대해 알아보겠습니다.

근래 앱 개발에 대한 문의들이 있는 가운데 클라이언트에게 어플리케이션의 레이아웃, 디자인은 물론 기본적인 동작까지 보여줄 수 있는 여러 프로토타이핑 도구들에 대한 관심도 역시 커져가고 있었지만 주요 작업이 앱 보다는 웹(반응형)이기 때문에 크게 신경은 쓰지 않았습니다.

그래도 어떤 도구들이 있으며 어떤 것들이 많이 쓰인다 정도는 인터넷을 통해 어느 정도는 알고 있었죠. 그 중에 구글에서 인수하여 무료로 공개한 'Form(Mac)'과 'Pixate(Mac/PC)'정도는 시스템에 설치해 놓고 만져보고 있던 상황이던 중에 '어도비가 그냥 있지는 않을 텐데...'라는 생각에 구글링을 해 보니 역시나 진행중인 프로젝트가 있었습니다. 그것이 바로 이번에 프리뷰 테스트 단계에 들어간 프로토타이핑 프로그램 'Adobe XD'입니다('XD'는 'Experience Design'을 뜻하고 있으며 얼마전까지는 'Adobe Comet'로 알려져 있었습니다).

프리뷰 테스트 중이기 때문에 어도비 ID가 있으면 무료로 다운로드 받아서 사용할 수 있지만 아직까지는 맥(Mac) OSX용으로만 공개하고 있습니다. 조만간 혹은 정식 버전이 공개되면 윈도우용도 나오겠지만요.

어쨌든 프로그램을 다운받고 설치 후 바로 실행해 보았습니다. 그리고 잠깐 끄적끄적 해 봤는데 아주 손쉽게 아래와 같은 결과물이 나옵니다.

Adobe XD - Prototyping Tool

어도비의 홈페이지에서 프로그램 설명 동영상을 보면 더 쉽게 이해할 수 있는데, 포토샵이나 파워포인트 등을 사용해서 프로토타입 이미지를 만드는 경우 텍스트 나 사진 등의 반복작업이 (복사+붙이기 작업)이 꽤나 많아집니다만 Adobe XD를 사용하면 그럴 필요가 없습니다.

위의 캡쳐화면에서 중간에 볼 수 있는 녹색 상자가 그런 번거로움을 확 줄여주는데요. 드래그(drag)만 해 주면 자기가 알아서 반복 복사를 해 줍니다.

거기다가 이미지에 대한 마스킹도 아주 간단하게 할 수 있으며 반복되는 레이아웃 내의 이미지들도 간편하게 개별 수정이 가능합니다. 거의 모든 작업이 그냥 드래그앤드롭(drag&drop)으로 마무리 되는 것이 매우 직관적이면서도 편하게 작업할 수 있게 합니다.

Adobe XD는 크게 3영역으로 나누어지는데 'Design', 'Prototype' 그리고 'Preview'입니다.

Design 영역에서는 좌측 툴박스의 여러 도구 및 외부 이미지, 클립, 아이콘 등을 사용해서 앱, 웹의 레이아웃 및 디자인을 할 수 있고, 

Prototype 영역에서는 Design 영역에서 만들어진 아트보드(artboard) 사이의 링크를 통한 이동 관계 및 전환 애니메이션을 설정할 수 있습니다.

Preview는 위의 두 영역에서 만들어진 프로토타입을 미리보는 기능을 통해 실제 디스플레이에서 보이는 모습과 동작을 실행해볼 수 있습니다.

adobe xd - prototype tab

특히 이 'Preview' 기능은 매우 강력한데요. 저의 경우 다른 프로토타이핑 도구(Form, Pixate)들이 프리뷰 부분에서 생각보다 만족스러운 결과를 볼 수 없었기 때문입니다. Form의 경우는 자꾸 프리뷰 창이 닫히고 실시간 수정이 잘 되지 않았으며, Pixate는 클라우드에 저장이 가능했지만 저장 시간 간격에 문제가 있는 것인지 아니면 해외 접속 문제 때문인지 수정 사항이 반영이 안되는 경우가 많았습니다만 Adobe XD의 프리뷰는 클릭과 함께 바로 동작하고 전혀 지연시간도 없고, 오류도 없었으며 프리뷰 창이 띄어진 상태에서 수정작업을 해도 곧바로 적용이 됩니다. 동영상으로 저장(mov파일)도 클릭만으로 바로 되기 때문에 동작을 다른 사람들에게 보여주기도 쉽고 'Creative Cloud'에 바로 저장하고 URL을 만들어 배포할 수 있습니다.

adobe xd - preview window

2D기반의 그래픽 프로그램의 대부분을 Adobe가 꽉 잡고 있는 것은 어찌보면 '독점'이 아닐까 생각이 되기도 합니다. 저 역시 비용적인 부분이라던가 약간 반항심(?)같은 마음으로 다른 대체 프로그램들(상용 혹은 오픈소스)을 찾아보고 사용도 해 봤지만 결국은 Adobe로 돌아올 수 밖에 없는 것은 현실이었습니다. 이번에 만나게 된 Adobe XD도 프리뷰 버전을 경험해 보니 역시나 어도비...라는 생각밖에 들지 않으며, 거의 100% 사용하게 될 것 같습니다.

"스텝 바이 스텝 워드프레스 테마 쉽게 만들기"를 전자책으로 발매하였습니다.

부트스트랩3와 언더스코어스 테마를 가지고 직접 디자인한 홈페이지를 만드는 방법을 다루었으며, 텍소노미, 커스텀 포스트 타입 등으로 콘텐츠를 분류하여 포스팅하고 이를 출력하는 것을 배울 수 있습니다. 구글 북스에서는 20%정도 미리보기가 가능합니다.

워드프레스 테마 쉽게 만들기

구글 북스(Google Play Books)에 "스텝 바이 스텝 워드프레스 홈페이지 쉽게 배우기"를 등록하였습니다. 무료 샘플을 통해 초반 30% 정도를 미리보기 하실 수 있으며 블로그 공지에 있는 파일보다는 약간 짧게 볼 수 있습니다. 교보문고와 같이 PDF 파일로 제공됩니다.

구글 북스 바로가기

워드프레스 초급 교재 구글 북스 등록