#336 Copycopter

개발자로서 광고문안을 작성하는 것이 꼭 내 입맞에 맞을 순 없습니다. 아래 웹페이지의 상단에 있는 문구를 예로 들어 보겠습니다. 현재 보이는 “Browse Products”대신에 “Browse Our Products”나, “Product Listing”이나, 또는 “Products” 중에 어느 것이 더 낫겠습니까?

어떤 고객은 상단문구나 그 아래에 있는 설명문을 바꾸고 싶어할 수 있습니다. 그러나 이 문구들은 그리 쉽게 변경할 수 없습니다. 그것은 뷰 템플릿에 직접 코딩이 된 상태라서 단 몇 글자만이라도 변경하고자 할 경우 소스코드에 접근할 수 있는 권한이 있어야 하며 템플릿을 수정하고 어플리케이션을 재배포해야 합니다. 만약에 고객이 직접 이와 같이 문구를 수정할 수 있는 간단한 관리자 인터페이스가 있다면 훨씬 더 쉽게 해결할 수 있을 것입니다. 바로 Copycopter가 이러한 일을 하게 되며, 고객이 레일스 어플리케이션의 문구를 수정할 수 있는 인터페이스를 제공해 줍니다. Copycopter는 젬형태로 제공되어 어프리케이션에 쉽게 설치할 수 있습니다. 이것은 원래 유료서비스였지만, 최근에 Thoughtbot가 오픈소스로 공개하여 자유롭게 사용할 수 있게 되었으며 이번 연제애서 바로 이 젬을 이용해서 헤드라인과 설명문을 수정가능하게 할 것입니다.

Copycopter 서버 셋업

우선, 우리는 Copycopter 서버를 셋업해야 합니다. 이것은 하나의 완전한 레일스 어플리케이션으로 카피를 수정할 수 있는 인터페이스를 제공해 줍니다. 이것은 마운트 가능한 엔진 프로그램이 아니라서 서버에 별도로 배포해야 하며 레일스 어플리케이션과는 별개로 (서버에서) 실행되어야 합니다. Heroku는 이러한 상황에 완벽하게 들어 맞는 서비스이기 때문에 Copycopter를 Heroku의 한 dyno상에서 동작하게 하면 무료로 사용할 수 있습니다. Heroku 계정이 없다면 무료로 등록할 수 있습니다. 일단 등록한 후 Heroku Toolbelt를 설치해서 커맨트라인에서 어플리케이션을 관리할 수 있도록 합니다. 이것을 다운로드후 설치하면 터미널 윈도우에서 heroku 명령을 사용할 수 있게 됩니다. 여기서 이 명령을 이용해서 Heroku 계정에 로그인합니다.

$ heroku login
Enter your Heroku credentials.
Email: eifion@asciicasts.com
Password: 
Authentication successful.

이제 인증된 상태이므로 Copycopter 서버를 Heroku로 배포할 수 있습니다. Github 문서를 보면 이러한 작업을 하기 위한 방법을 알 수 있는데 이대로 따라할 것입니다. 먼저, 해당 프로젝트를 로컬 머신으로 복사합니다.

$ git clone git://github.com/copycopter/copycopter-server.git

복사한 디렉토리로 이동하여 Heroku로 배포를 시작합니다. 우선, Heroku 어플리케이션을 새로 만듭니다.

$ cd copycopter-server/
$ heroku create --stack cedar

각자의 셋업환경에 따라 이 명령을 실행할 때 에러가 나타날 수도 있습니다. 이 때 bundle install 명령을 실행하여 이 에러를 고칠 수 있습니다. 테스트와 연관된 젬들을 줄이기 위해 테스트 환경을 포함하지 않은 채 이 명령을 실행하는 것이 가장 좋습니다.

$ bundle install --without=test

이후에 아무런 에러없이 heroku create 명령을 실행할 수 있어야 합니다. Git을 이용해서 Heroku로 배포하며 git push 명령을 실행하여 어플리케이션을 배포하게 됩니다.

$ git push heroku master

아래의 명령을 이용하면 서버상에서 데이터베이스 마이그레이션 작업을 할 수 있습니다.

$ heroku run rake db:migrate

이 작업이 마무리되면 heroku restart 명령을 실행합니다. 이제 이 명령을 실행하므로써 Copycopter 프로젝트를 생성할 수 있게 됩니다. (자신의 어플리케이션에 대한 NAME, USERNAME 그리고 PASSWORD 옵션을 본인의 것으로 확실하게 변경해 주어야 합니다.)

$ heroku run rake copycopter:project NAME=Store USERNAME=eifion PASSWORD=secret

브라우저상에서 어플리케이션을 보기 위해 heroku open 명령을 실행하면 우리가 방금 전에 만들었던 사이트를 볼 수 있습니다.

“Store” 링크를 클릭하면 Copycopter 프로젝트를 생성할 때 사용한 사용자명과 비밀번호를 입력하라면 프롬프트를 보게 될 것입니다. 입력을 하면 해당 프로젝트 페이지로 이동할 것이며 아직 이 프로젝트에 대해서 레일스 어플리케이션을 지정하지 않은 상태임을 알게 될 것입니다. 이 페이지에는 이 작업을 하기 위해 조치가 설명되어 있는데, 어플리케이션의 Gemfile에 특정 젬을 추가하고 Copycopter 클라이언트를 구성하기 위해 initializer를 추가해야 합니다.

Copycopter를 사용하기 위한 레일스 어플리케이션 구성하기

이 설명에 따라 Store 어플리케이션에 Copycopter를 추가할 것입니다. 먼저, 해당 젬을 Gemfile에 추가하고 설치하기 위해 bundle 명령을 실행합니다.

gem 'copycopter_client', '2.0.0'

그 다음에 initializer를 만들 것입니다. 여기에는 우리가 배포했던 Copycopter 서버로 어플리케이션을 연결해 주는 구성코드를 포함할 것입니다.

CopycopterClient.configure do |config|
  config.api_key = 'f5a22cf0acffc7010db99951be3c5d0d'
  config.host = 'sharp-window-4901.herokuapp.com'
end

이제 우리는 Copycopter를 통해서 어플리케이션의 홈페이지에 있는 헤드라인과 설명문을 수정가능하게 할 수 있습니다. 이를 위해서는 해당 페이지의 템플릿 파일로 이동하여 각 문구들을 t 메소드 호출로 대체하여 해당 문구에 대한 유일한 키를 넘겨주어야 합니다. 이 때 해당 문구가 Copycopter에 정의되어 있는 않는 경우 대신사용하게 될 디폴트값을 각 항목에 대해서 지정해 줍니다.

<h1><%= t "products.headline", default: "Browse Products" %></h1>

<em><%= t ".tagline", default: "We have what you need at a great low price." %></em>

여기서 t 메소드는 레일스에 내장된 다국어 지원 메소드이며 물론 Copycopter를 사용해서 특정 웹사이트를 다국어로 지원할 수 있게 할 수도 있습니다. tagline에 대한 식별자는 .으로 시작하는 것을 유의해서 봐야 합니다. 이것은 상대경로를 가지는 키를 만들어 주는데 해당 템플릿 파일의 경로를 앞에 붙여서 유일한 식별자로 만들어 주게 됩니다.

자, 이제 어플리케이션 서버를 재시동하여 Copycopter를 로드할 필요가 있습니다. 이후로 해당 페이지를 다시 로드할 때 t 메소드 호출시마다 디폴트값이 보여야 합니다. 그러나, 이제 Copycopter 서버를 방문할 때에 키를 조회할 수 있는 검색창을 보게 될 것입니다. “headline”을 검색하면 products.headine 키가 목록상에 보일 것입니다. 이것을 클릭하면 해당 키의 문구를 수정할 수 있는 페이지로 이동하게 될 것입니다. 우리는 여기서 “Browse Products” 를 “Browse Our Products”로 변경할 것입니다.

여기서 변경내용을 임시로 로컬에만 저장할 것인지 아니면 운영환경으로 반영(저장)케 할 것인지 선택할 수 있습니다. 우리는 변경내용을 “임시저장(Draft)” 상태로 저장할 것입니다. 어플리케이션 페이지를 다시 로드할 때 해당 문구가 변경된 것을 확인할 수 있습니다.

똑같은 방식으로 tagline을 변경할 수 있습니다. 이것은 어플리케이션에서 상태 키로 지정했기 때문에 products.index.tagline 키를 가지게 될 것입니다. 에디터를 통해서 수정가능한 문구에 스타일링도 추가할 수 있으며 해당 문구를 다른 언어로 번역하고자 할 경우 해당 로케일로 지정할 수도 있습니다.

마지막으로 주목할 만한 것은 하나의 Copycopter 서버로 여러개의 프로젝트를 관리할 수 있어서 또 다른 사이트가 있을 경우 다른 프로젝트명으로 다시 heroku run rake copycopter:project 명령을 실행할 수 있다는 것입니다.