Daily Upgrade

Ruby on Rails - full_messages 한국어 처리 | Ruby on Rails - full_messages for Korean

Thu, 23 Jun 2011 08:27:00 +0900

이 글은 액티브 레코드를 검증할 때 제공하는 문구를 한국어로 바꾸는 방법에 대한 내용입니다.

먼저 진행을 위해 예제 프로젝트를 만듭니다.

$ rails new example
$ cd example

간단하게 로그인 아이디, 이메일 필드를 갖는 사용자 모델을 만듭니다.

$ rails g scaffold user login:string email:string
$ rake db:migrate

`app/models/user.rb`

class User < ActiveRecord::Base
  validates :login, :presence   => true,
                    :uniqueness => true,
                    :length     => {:in => 3..20}

  validates :email, :presence   => true,
                    :uniqueness => true
end

여기까지 코드를 적고 서버를 올린 후 필드를 채우지 않고 새 사용자를 만들어 봅니다.

화면에 나오는 오류 문구는 ActiveModel::Errors#full_messages를 이용해서 만들어집니다.

`app/views/users/_form.html.erb`

<% @user.errors.full_messages.each do |msg| %>
  <li><%= msg %></li>
<% end %>

이제 한국어 사용을 위해 아래와 같이 설정하고 서버를 다시 올립니다.

`config/application.rb`

config.i18n.default_locale = :ko

한국어 문구를 위해 새로 파일을 작성합니다.

`config/locales/ko.yml`

ko:
  attributes:
    login: 아이디
    email: 이메일
  errors:
    messages:
      blank: 에 내용을 입력해 주세요

레일즈에서 기본적으로 제공하는 문구

actionpack/lib/action_view/locale/en.yml
- 숫자, 날짜, 시간, 폼
activemodel/lib/active_model/locale/en.yml
- 액티브 모델 오류
activerecord/lib/active_record/locale/en.yml
- 액티브 레코드 오류
activesupport/lib/active_support/locale/en.yml
- 날짜/시간 표시

위 영문에 대응하는 한국어 문구를 작성하면 됩니다.

문제

한국어 문구를 보여줬을 때 문제점이 몇 가지 있습니다.

필드 이름과 오류 문구 사이의 공백

이 공백은 activemodel/lib/active_model/locale/en.yml 파일에 errors.format 값이 “%{attribute} %{message}“로 설정되어 있기 때문에 생깁니다.

받침에 따른 조사

한국어는 체언의 받침 유무에 따라서 조사가 달라지는 경우가 많습니다. “이/가, 은/는, 을/를, 과/와” 등이 예가 되겠습니다.

필드 이름의 위치

위에서 얘기한 것처럼 errors.format 값이 “%{attribute} %{message}“이기 때문에 주어나 목적어가 반드시 처음에 나와야 합니다. 그래서 “다른 사람이 쓰고 있는 아이디입니다.” 형태의 문장을 만들 수 없습니다.

구현

위 문제를 모두 고치기 위해 아래와 같은 방법을 생각했습니다.

errors.format 값을 %{message}로 바꿉니다.
activerecord.errors.messages 안의 각 문구 안에 %{attribute}를 적절한 위치에 넣습니다.
문구 안에 조사를 같이 넣어줍니다.
체언에 따라 조사를 바꿉니다.

`config/locales/ko.yml`

문구에 조사를 구분하기 위해서 괄호 두 개로 감싸줍니다. 받침이 있는 형태이든 없는 형태이든 상관없습니다.

ko:
  attributes:
    login: 아이디
    email: 이메일
  errors:
    format: %{message}
    messages:
      blank: 헉! %{attribute}((을)) 입력해 주세요

레일즈 오류 문구 검색 순서

특정 모델 또는 특정 필드에 다른 문구를 보여 주려면 적절하게 설정하면 됩니다.

activerecord.errors.models.[model_name].attributes.[attribute_name]
activerecord.errors.models.[model_name]
activerecord.errors.messages
errors.attributes.[attribute_name]
errors.messages

한국어 처리를 위해 새 파일을 작성합니다.

`config/initializers/korean_full_messages.rb`

# encoding: utf-8

class Korean
  # 받침에 따른 알맞은 조사를 구한다.
  PROPOSITIONS = {'이' => '가', '은' => '는', '을' => '를', '과' => '와'}

  def self.get_proposition word, proposition
    # 한국어만 처리한다.
    return '' if word.size == word.bytesize

    # 받침이 없을 때
    if word.mb_chars.last.decompose[2].nil?
      PROPOSITIONS[proposition] || proposition
    # 받침이 있을 때
    else
      PROPOSITIONS.invert[proposition] || proposition
    end
  end
end

module ActiveModel
  class Errors
    def korean_full_messages
      # 한국어 설정이 아니면 full_messages를 돌려준다.
      return full_messages unless I18n.locale == :ko

      full_messages.map do |message|
        # 오류 문구에서 ((조사)) 형태를 찾아 받침에 맞는 조사로 바꿔 준다.
        message.gsub(/(?<=(.{1}))\(\(([이가은는을를과와])\)\)/) do
          Korean.get_proposition $1, $2
        end
      end
    end
  end
end

`app/views/users/_form.html.erb`

  <% @user.errors.korean_full_messages.each do |msg| %>
    <li><%= msg %></li>
  <% end %>

참고

크롬 확장 프로그램 개발 - 페이지 액션 | Chrome Extension Development - Page Actions

Mon, 20 Jun 2011 10:13:06 +0900

개요

브라우저 액션과 페이지 액션 비교는 크롬 확장 프로그램 개발 - 브라우저 액션 글에서 적었는데요. 한 번 더 말씀드리면 아이콘을 감추고 싶으면 페이지 액션을 그 외에는 브라우저 액션을 쓰는 것을 추천합니다.

페이지 액션으로 구현하는 확장 프로그램은 대개 아래와 같은 절차로 구현합니다.

컨텐트 스크립트를 통해 페이지를 살펴봅니다.
실행 조건을 만족하면 주소창에 페이지 액션 아이콘을 보여 줍니다.
아이콘을 클릭했을 때 프로그램을 실행합니다.

페이지 액션 아이콘을 보여주는 함수는 chrome.pageAction.show(integer tabId)입니다. 크롬 확장 프로그램 개발 - 컨텐트 스크립트 글에서 얘기한 것처럼 컨텐트 스크립트는 일부 chrome.extension.*를 제외한 다른 API를 사용할 권한이 없습니다. 그래서 백그라운드 페이지에 관련 함수를 넣고 컨텐트 스크립트에서 호출하도록 합니다.

메시지 전달 (Message Passing)

컨텐트 스크립트에서 백그라운드 페이지와 통신하는 방법을 메시지 전달이라고 합니다. 이 예제에서는 chrome.extension.sendRequest, chrome.tabs.sendRequest 함수로 메시지를 보내고 chrome.extension.onRequest.addListener 함수를 통해서 메시지를 받도록 합니다.

컨텐트 스크립트 → 백그라운드 페이지
- chrome.extension.sendRequest → chrome.extension.onRequest.addListener
백그라운드 페이지 → 컨텐트 스크립트
- chrome.tabs.sendRequest → chrome.extension.onRequest.addListener

백그라운드 페이지는 확장 프로그램의 기본 페이지입니다. 컨텐트 스크립트는 웹 페이지에 포함되고 이 웹 페이지는 탭에 포함됩니다. 그래서 백그라운드 페이지를 호출하려면 extension을 컨텐트 스크립트를 호출하려면 tabs를 사용한다고 이해하면 될 것 같습니다.

플래시 극장

먼저 웹 페이지에 플래시가 있으면 배경을 흐리게 만들어서 집중할 수 있게 하는 확장 프로그램을 만들어 보겠습니다. 이미 Turn Off the Lights라는 좋은 확장 프로그램이 있으니 참고하시고 예제에서는 아주 단순하게 구현하겠습니다.

컨텐트 스크립트에서 웹 페이지에 플래시가 있는지 검사합니다.
플래시가 있으면 페이지 액션 아이콘을 보여줍니다.
아이콘을 클릭하면 컨텐트 스크립트를 통해 오버레이를 만듭니다.
아이콘을 다시 클릭하면 오버레이를 감춰서 원래 화면을 보여줍니다.

`wmode` 속성

플래시는 <object> 또는 <embed> 태그를 이용해서 문서에 들어갑니다. wmode 속성이 transparent가 아니면 플래시는 CSS의 z-index 영향을 받지 않습니다. 그래서 화면을 덮는 오버레이를 만들 때는 플래시가 들어 있는 <embed> 태그의 스타일을 display: none 또는 visibility: hidden으로 바꾸어서 처리합니다.

또한 wmode 속성은 자바스크립트를 사용해서 동적으로 설정할 수 없습니다. 이를 구현하려면 innerHTML 등을 이용해서 새롭게 태그를 만들어야 합니다.

manifest.json

{
  "name": "Flash Theater",
  "version": "0.1.0",
  "background_page": "background.html",
  "content_scripts": [{
    "js": ["contentscript.js"],
    "matches": ["http://*/*", "https://*/*"]
  }],
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png"
  },
  "page_action": {
    "default_icon" : "icon-16.png",
    "default_title": "Flash Theater"
  },
  "permissions": ["tabs"]
}

페이지 액션 선언이 추가되었습니다.

background.html

<!doctype html>
<title></title>
<script>
// 컨텐트 스크립트에서 요청이 오면 처리합니다.
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  // 페이지 액션 아이콘을 클릭했을 때 실행할 이벤트 핸들러를 등록합니다.
  chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
      // 컨텐트 스크립트에 배경 처리를 요청합니다.
      chrome.tabs.sendRequest(tab.id, {});
    });
  });
  // 페이지 액션 아이콘을 보여줍니다.
  chrome.pageAction.show(sender.tab.id);
});
</script>

contentscript.js

// 웹 페이지에 플래시가 있을 때만 실행합니다.
if (document.querySelector('[type="application/x-shockwave-flash"]')) {
  // 백그라운드 페이지를 호출합니다.
  chrome.extension.sendRequest({});

  // 페이지 액션 아이콘을 클릭했을 때 요청을 받습니다.
  chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    var overlay = document.getElementById('theater-overlay');

    if (overlay) {
      // 오버레이를 토글합니다.
      overlay.style.display = overlay.style.display == 'none' ? 'block' : 'none';
    } else {
      overlay = document.createElement('div');
      overlay.id = 'theater-overlay';

      var styles = {
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        height         : '100%',
        left           : 0,
        position       : 'fixed',
        width          : '100%',
        top            : 0,
        zIndex         : 10000
      }

      for (var style in styles) {
        overlay.style[style] = styles[style];
      }

      document.body.appendChild(overlay);
    }
  });
}

결과

사진 갤러리

이번에는 웹 페이지에 사진을 팝업 페이지로 보여주는 확장 프로그램을 만들어 보겠습니다.

manifest.json

{
  "name": "Photo Gallery",
  "version": "0.1.0",
  "background_page": "background.html",
  "content_scripts": [{
    "js": ["contentscript.js"],
    "matches": ["http://*/*", "https://*/*"]
  }],
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png"
  },
  "page_action": {
    "default_icon" : "icon-16.png",
    "default_popup": "popup.html",
    "default_title": "Photo Gallery"
  }
}

페이지 액션 선언에 팝업 페이지가 들어가 있습니다.

contentscript.js

var photos = [];

// document.images는 HTMLCollection입니다.
// Array.prototype.slice를 이용해 Array로 바꾼 후 forEach 문을 사용합니다.
Array.prototype.slice.call(document.images).forEach(function(image) {
  // Image.naturalWidth로 사진의 원래 너비를 구합니다.
  if (image.naturalWidth >= 150) {
    photos.push(image.src);
  }
});

// 너비가 150픽셀이 넘는 사진이 있으면 실행합니다.
if (photos.length > 0) {
  chrome.extension.sendRequest(photos);
}

gallery.css

불투명한 오버레이와 그 위의 사진들을 위한 CSS입니다.

#photo-gallery {
  background-color: rgba(0, 0, 0, 0.9);
  height: 100%;
  left: 0;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
#photo-gallery img {
  border: 5px solid #fff;
  border-radius: 3px;
  height: 150px;
  margin: 10px;
  width: 150px;
}

background.html

<!doctype html>
<title></title>
<script>
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  // 페이지 액션 아이콘을 클릭하면 컨텐트 스크립트를 통해 갤러리를 보여줍니다.
  chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
      chrome.tabs.sendRequest(tab.id, {});
    });
  });

  // 페이지 액션 아이콘을 보여줍니다.
  chrome.pageAction.show(sender.tab.id);
});
</script>

popup.html

<!doctype html>
<html>
<head>
  <title></title>
  <style>
    body, img, p {
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 240px;
    }
    img {
      height: 50px;
      margin: 5px;
      width: 50px;
    }
    p {
      text-align: right;
    }
  </style>
</head>
<body>
  <div id="photos"></div>
  <p>
    <button id="close">Close</button>
  </p>
<script>
  var photos = document.getElementById('photos');

  // 백그라운드 페이지에서 사진 주소를 가져옵니다.
  chrome.extension.getBackgroundPage().photos.forEach(function(photo) {
    var img = document.createElement('img');
    img.src = photo;
    photos.appendChild(img);
  });

  // 팝업을 닫습니다.
  document.getElementById('close').addEventListener('click', function(event) {
    window.close();
  });
</script>
</body>
</html>

결과

정리

지금까지 두 예제를 통해 페이지 액션과 팝업 페이지를 구현해봤습니다. 컨텐트 스크립트와 백그라운드 페이지, 팝업 페이지 사이의 통신이 크롬 확장 프로그램 개발의 핵심이라고 생각합니다.

다음 글에서는 한국어 맞춤법 검사기 예제를 구현하면서 보조 메뉴, 알림창에 대해서 얘기하겠습니다.

참고

지난 연재

크롬 확장 프로그램 개발 - 컨텐트 스크립트 | Chrome Extension Development - Content Scripts

Mon, 23 May 2011 14:07:55 +0900

개요

컨텐트 스크립트란 웹 페이지 안에서 동작하는 자바스크립트와 스타일시트를 말합니다. 페이지를 불러온 후 북마클릿을 실행하는 것처럼 페이지의 내용을 읽어올 수도 있고 마음대로 바꿀 수도 있습니다.

물론 보안상 몇 가지 제한사항이 있습니다. 공식 페이지에서는 아래와 같이 얘기합니다.

chrome.extension.* 을 제외한 API를 사용할 수 없습니다.
확장 프로그램 페이지에 선언한 변수, 함수를 사용할 수 없습니다.
웹 페이지나 다른 컨텐트 스크립트에 선언한 변수, 함수를 사용할 수 없습니다.
크로스 사이트 AJAX 통신을 할 수 없습니다.

컨텐트 스크립트는 격리된 공간에서 실행됩니다. 예를 들어 jQuery를 사용하는 여러 확장 프로그램을 설치하더라도 충돌을 일으키지 않는다는 말입니다. 물론 같은 내용을 여러 번 호출하는 낭비는 있겠지만, 보안상 어쩔 수 없는 일이라고 봅니다.

컨텐트 스크립트는 브라우저/페이지 액션에서 웹 페이지를 제어하려고 할 때 같이 사용하는 것이 대부분이지만 액션 없이 컨텐트 스크립트만 사용하는 예제를 먼저 만들어 봅니다.

무지개 링크

무지개 링크는 워드프레스나 텍스트큐브 등 설치형 블로그 서비스에서 제공하던 플러그인에서 착안했습니다. 커서를 올리면 링크 색깔이 다채롭게 변하는 기능인데요. 보통 자바스크립트를 이용해서 구현하던 것을 CSS3 애니메이션으로 만들어 보겠습니다.

manifest.json

{
  "name": "Rainbow Link",
  "version": "0.1.0",
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": ["rainbow.css"]
  }]
}

컨텐트 스크립트를 사용하기 위해서는 manifest.json 파일에 content_scripts 항목으로 사용할 파일과 적용할 주소를 등록해야 합니다.

매치 패턴

매치 패턴은 확장 프로그램의 권한을 등록하는 permission 항목이나 컨텐트 스크립트를 등록하는 content_script 항목에서 적용할 웹 페이지 주소를 정할 때 사용하는 규칙입니다.

와일드카드로 * 문자를 사용할 수 있습니다. 자세한 규칙은 홈페이지를 참고하시고 여기에서는 몇 가지 예만 적겠습니다.

http://*/*
http://*/foo*
https://*.google.com/foo*bar
http://127.0.0.1/*
*://mail.google.com/*
<all_urls>

rainbow.css

@-webkit-keyframes rainbow {
  0%   {color: #f00;}
  17%  {color: #f90;}
  33%  {color: #ff0;}
  50%  {color: #0f0;}
  67%  {color: #00f;}
  83%  {color: #60f;}
  100% {color: #90f;}
}

a:hover {
  -webkit-animation: rainbow infinite 3s;
}

확장 프로그램을 설치하고 마우스 커서를 링크 위에 올려두면 휘황찬란한 결과를 확인할 수 있습니다. :) 무지개 링크라고 정말 일곱 가지 색만 넣었는데 색을 더 추가하면 보기 좋을 것 같습니다.

`-webkit-animation` 단축 형식

-webkit-animation: name duration timing_function delay iteration_count direction

페이지 이동 버튼

이번에는 자바스크립트 파일만 사용해서 웹 페이지의 맨 위와 아래로 이동하는 기능을 만들어봅니다.

manifest.json

{
  "name": "Go To",
  "version": "0.1.0",
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["goto.js"]
  }]
}

goto.js

(function() {
  var top    = document.createElement('a'),
      topImg = document.createElement('img');

  topImg.src = chrome.extension.getURL('top.png');
  top.addEventListener('click', function() {
    window.scrollTo(0, 0);
  });
  top.appendChild(topImg);

  var bottom    = document.createElement('a'),
      bottomImg = document.createElement('img');

  bottomImg.src = chrome.extension.getURL('bottom.png');
  bottom.addEventListener('click', function() {
    window.scrollTo(0, document.body.scrollHeight);
  });
  bottom.appendChild(bottomImg);

  var wrap = document.createElement('div');
  wrap.style.position = 'fixed';
  wrap.style.right    = 0;
  wrap.style.top      = 0;
  wrap.style.zIndex   = 10000;

  wrap.appendChild(top);
  wrap.appendChild(bottom);

  document.body.appendChild(wrap);
})();

버튼 2개를 만들어 하나는 웹 페이지의 맨 위로 하나는 맨 아래로 이동하게 합니다. 그리고 버튼을 감싸는 div 태그를 만들어 웹 페이지의 오른쪽 위에 고정합니다.

`chrome.extension.getURL`

컨텐트 스크립트에서 확장 프로그램에 등록된 파일에 접근하려고 할 때 사용합니다. 확장 프로그램을 등록할 때 사용하는 폴더를 기준으로 상대경로를 인자로 넘기면 됩니다.

스타일시트에서는 자바스크립트를 사용할 수 없어서 확장 프로그램에 등록된 파일의 경로를 가져올 방법이 없으니 주의하시기 바랍니다.

정리

간단하게 스타일시트와 자바스크립트 파일을 다루는 컨텐트 스크립트에 대해서 얘기했습니다. chrome.extension.getURL 함수를 빼고는 원래 하던 대로 웹 페이지를 다루면 되므로 따로 설명할 말이 별로 없었습니다. :)

다음 글에서는 페이지 액션을 다루도록 하겠습니다. 개발 방법은 브라우저 액션과 대부분 같아서 아직 설명하지 않은 팝업 페이지와 컨텐트 스크립트와의 연동을 중심으로 얘기하겠습니다.

참고

크롬 확장 프로그램 개발 - 브라우저 액션 | Chrome Extension Development - Browser Actions

Mon, 09 May 2011 10:00:05 +0900

크롬 웹 스토어에 있는 확장 프로그램들을 설치해 보면 대부분 브라우저 액션입니다. 페이지 액션이 조금 있고, 옴니박스는 몇 개 되지 않고 보조 메뉴나 컨텐트 스크립트는 보통 액션에 부가된 기능으로 들어가 있습니다.

브라우저 액션 對 페이지 액션

그렇다면 브라우저 액션과 페이지 액션은 각각 언제 써야 할까요? 먼저 각 액션에서 지원하는 API를 살펴보겠습니다.

먼저 브라우저 액션에서 사용하는 chrome.browserAction API입니다.

메소드
- setBadgeBackgroundColor
- setBadgeText
- setIcon
- setPopup
- setTitle
이벤트
- onClicked

다음은 페이지 액션에서 사용하는 chrome.pageAction API입니다.

메소드
- hide
- setIcon
- setPopup
- setTitle
- show
이벤트
- onClicked

브라우저 액션에는 뱃지에 대한 함수가, 페이지 액션에는 액션을 보이고 감추는 함수가 있다는 점을 빼면 모두 같습니다. 다른 점이 하나 더 있는데 아이콘 위치와 크기가 다르다는 것입니다. 브라우저 액션은 주소창 오른쪽에 있는 도구 모음에, 페이지 액션은 주소창 안에 아이콘이 보입니다. 브라우저 액션은 19픽셀, 페이지 액션은 16픽셀입니다.

특별한 제한이 있는 것이 아니라서 사실 어떤 액션을 사용하더라도 상관없습니다. 페이지 액션의 대표적인 확장 프로그램인 RSS 구독을 예를 들면 아이콘이 숨겨져 있다가 RSS 피드가 웹 페이지에 있으면 아이콘을 보여줍니다. 이를 브라우저 액션으로 구현한다면 RSS 피드 유무에 따라서 아이콘을 바꿔서 보여 주는 방법을 쓸 수 있겠죠.

공식 홈페이지에서는 대부분 페이지에서 실행하면 브라우저 액션을 쓰고 실행할 페이지가 적으면 브라우저 액션을 쓰라고 권합니다. 저는 아이콘을 감추고 싶으면 페이지 액션을 그 외에는 브라우저 액션을 쓰는 것을 추천합니다.

구현

요즘 많이 회자하는 시간 관리법인 뽀모도로 테크닉에 써먹을 간단한 타이머를 브라우저 액션으로 만들려고 합니다. 뽀모도로를 잘 모르시는 분은 25분을 기본으로 하는 타이머를 만든다고 생각하시면 됩니다. 브라우저 액션만의 기능인 뱃지를 써서 남은 시간을 보여 주려고 합니다.

확장 프로그램 개발을 할 때 가장 먼저 해야 할 일은 manifest.json 파일을 작성하는 것입니다. 이번에는 브라우저 액션을 사용할 테니 browser_action 필드를 추가합니다. 또 아이콘을 지정하기 위해 icons 필드를, 뽀모도로 로직을 담을 background_page 필드를 추가합니다.

manifest.json

{
  "name": "Simple Pomodoro Timer",
  "version": "0.1.0",
  "icons": {
    "48": "icon-48.png"
  },
  "browser_action": {
    "default_icon" : "icon-19.png",
    "default_title": "Simple Pomodoro Timer"
  },
  "background_page": "background.html"
}

아이콘은 구글에서 Pomodoro로 검색한 아이콘을 크기만 조절해서 19, 48픽셀 두 가지를 사용합니다.

아이콘 크기

해당 크기의 아이콘이 없으면 브라우저가 알아서 조절하지만 사용하는 용도에 맞는 모든 크기의 아이콘을 제공하는 것이 좋겠죠.

favicon, 인포바 : 16픽셀
주소창에 보이는 페이지 액션 아이콘 : 16픽셀
도구 모음에 보이는 브라우저 액션 아이콘 : 19픽셀
확장 프로그램 목록 : 48픽셀
웹 스토어 소개 페이지 : 128픽셀

API

아이콘을 클릭하면 뽀모도로를 실행해서 남은 시간을 보여 주고 한 번 더 클릭하면 정지하는 구조로 만들겠습니다. 이 프로그램에서 사용할 API는 두 가지입니다.

onClicked
- chrome.browserAction.onClicked.addListener(function(Tab tab) {...})
- 브라우저 액션 아이콘을 클릭하면 발생하는 이벤트입니다. 처리할 함수를 인자로 넣습니다.
setBadgeText
- chrome.browserAction.setBadgeText(object details)
- 뱃지에 단어를 적습니다. 아이콘이 19픽셀이라 네 글자 정도 넣을 수 있습니다.

기능이 조금 심심한 것 같아서 하나만 더 추가해 보도록 하겠습니다.

`<audio>`

혹시 OmmWriter라는 프로그램을 아시나요? 글쓰기에 집중할 수 있게 배경화면과 배경음을 제공하는 편집기입니다. 또 RainyMood 같은 사이트를 가보신 적 있으신가요? 빗소리를 들려주는 사이트인데요. 저는 이렇게 마음을 차분하게 해 주는 배경음이 참 좋더라고요. :)

기왕 크롬을 사용하는 마당에 HTML5 기능 하나는 넣을 겸 뽀모도로를 시작하면 빗소리를 배경음으로 넣겠습니다. <audio> 태그를 추가하고 자바스크립트에서 제어하는 코드를 작성합니다.

자세한 오디오 태그의 내용은 아래 사이트를 참고하세요.

background.html

이제 완성된 코드는 아래와 같습니다.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <audio id="audio" src="rain.mp3" loop></audio>
    <script>
      var Pomodoro = {
        // 기본 뽀모도로 시간을 25분으로 합니다.
        POMODORO_TIME: 25 * 60 * 1000,

        // 뽀모도로를 시작합니다.
        start: function() {
          this.active = true;
          this.startedAt = new Date();
          this.interval = setInterval(this.countDown, 1000);
          document.getElementById('audio').play();
        },

        // 뽀모도로를 중지합니다.
        stop: function() {
          document.getElementById('audio').pause();
          clearInterval(this.interval);
          this.active = false;
        },

        // 1초마다 남은 시간을 계산해서 뱃지에 표시합니다.
        countDown: function() {
          var timeLeft = Pomodoro.POMODORO_TIME - (new Date() - Pomodoro.startedAt);

          if (timeLeft <= 0) {
            Pomodoro.stop();
            return;
          }

          var minutes = Math.floor(timeLeft / 60000),
              seconds = Math.floor((timeLeft - minutes * 60000) / 1000);

          chrome.browserAction.setBadgeText({
            text: minutes + ':' + (seconds < 10 ? '0' : '') + seconds
          });
        }
      };

      // 아이콘 클릭 이벤트를 설정합니다.
      chrome.browserAction.onClicked.addListener(function(tab) {
        // 클릭할 때마다 뽀모도로를 켰다 껐다 합니다.
        Pomodoro[Pomodoro.active ? 'stop' : 'start']();
      });
    </script>
  </body>
</html>

전체 소스는 GitHub에 올려 두었습니다.

확장 프로그램을 브라우저에 등록하는 방법을 한 번 더 말씀드리자면

주소창에 chrome://extensions을 입력하거나 도구 > 확장 프로그램 메뉴를 선택합니다.
개발자 모드를 열고 압축해제된 확장 프로그램 로드… 버튼을 클릭합니다.
작업 파일들을 저장한 폴더를 선택합니다.

정리

지금까지 브라우저 액션을 사용해서 뽀모도로 타이머를 만들어 봤습니다. 나중에 팝업 페이지나 설정 페이지를 추가해서 좀 더 그럴듯하게 만들 수도 있을 것 같습니다. 저는 뽀모도로를 GTD(Getting Things Done)와 결합해서 웹 앱으로 만들어 보는 건 어떨까 생각만 하고 있습니다. :)

브라우저 / 페이지 액션 아이콘은 <canvas>를 이용해서 만들 수 있다고 합니다. 약간의 애니메이션 효과를 넣을 수 있겠네요.

브라우저 액션은 이번 예제처럼 웹 페이지와 상관없이 구현된 것들도 많이 있습니다. 메일이나 페이스북 등의 서비스에 주기적으로 접근해 새 소식을 알려 주는 프로그램들이 좋은 예가 되겠습니다.

공식 홈페이지에 있는 API 문서와 예제 프로그램들도 반드시 확인해 보시기 바랍니다.

다음 글에서는 페이지 액션을 구현하기 전에 컨텐트 스크립트를 사용해서 웹 페이지를 제어하는 방법에 대해서 먼저 알아보도록 하겠습니다. 컨텐트 스크립트를 익힌 다음에는 웹 페이지를 사용하는 브라우저 액션이나 페이지 액션을 구현할 수 있을 겁니다.

참고

크롬 확장 프로그램 개발 - 개요 | Chrome Extension Development - Overview

Wed, 04 May 2011 10:00:00 +0900

크롬 확장 프로그램은 구글 크롬 브라우저에 설치해서 사용하는 부가 기능을 말합니다. 크롬 웹 스토어에서 내려받을 수 있고 개발한 확장 프로그램을 올릴 수도 있습니다.

웹킷 엔진에서 실행됩니다.

HTML5, CSS3 지원이 뛰어납니다.
같은 엔진을 사용하는 iOS, 안드로이드에 응용할 수 있습니다.

HTML, 자바스크립트, 스타일시트 파일로 이루어져 있습니다.

웹 개발에 필요한 지식을 그대로 사용할 수 있습니다.
XUL을 써야 하는 파이어폭스에 비해 개발하기 편합니다.

확장 프로그램 형태

크롬 확장 프로그램은 여러 가지 형태로 개발할 수 있습니다. 외관상으로 구별되는 점도 있고 사용하는 API가 다르기도 합니다. 어떤 형태로 개발할 수 있는지 하나씩 살펴보겠습니다.

브라우저 액션, 페이지 액션 (Browser Actions, Page Actions)

가장 일반적인 형태의 확장 프로그램입니다. 브라우저 액션은 주소창 오른쪽에 페이지 액션은 주소창 안에 아이콘이 나타납니다. 둘 다 팝업 페이지를 가질 수 있습니다.

보조 메뉴 (Context Menus)

마우스 오른쪽 클릭을 하면 생기는 보조 메뉴에 나타납니다. 특정한 종류의 요소를 클릭했을 때만 동작하게 할 수 있습니다.

옴니박스 (Omnibox)

특정 검색어를 주소창에 입력하면 나타납니다. 주로 검색과 관련된 확장 프로그램에 적합합니다.

오버라이드 페이지 (Override Pages)

크롬에서 기본적으로 제공해 주는 즐겨찾기, 방문 기록, 새 탭 페이지를 바꿉니다.

앱 (Apps)

크롬 브라우저의 기능을 확장하려는 것이 아니라 독립적인 탭에서 동작하는 웹 앱입니다.

테마 (Themes)

크롬 브라우저의 외관을 바꿉니다. 연재에서 다루지 않습니다.

확장 프로그램 페이지

확장 프로그램을 어떤 형태로 개발할지 결정했다면 이번에는 어떤 페이지를 작성해야 하는지 알아봅니다. 반드시 작성해야 하는 페이지는 없습니다. 만들려는 확장 프로그램 형태에 따라서 필요한 페이지를 추가하면 됩니다.

백그라운드 페이지 (Background Pages)

확장 프로그램 개발의 기본이 되는 HTML 파일입니다. 확장 프로그램 실행에 필요한 주 알고리즘을 이 페이지에 넣는 것이 일반적입니다. 사용자에게 보이지 않습니다.

컨텐트 스크립트 (Content Scripts)

웹 페이지에 끼워 넣을 수 있는 자바스크립트와 스타일시트 파일을 일컫습니다. 웹 페이지의 DOM(Document Object Model)을 살펴보거나 수정하기 위해 사용합니다.

팝업 페이지 (Popup Pages)

브라우저 액션, 페이지 액션에서 사용할 수 있는 HTML 파일입니다. 아이콘을 클릭하면 팝업 페이지를 보여줍니다.

설정 페이지 (Options Pages)

확장 프로그램에서 사용하는 값들을 사용자가 선택할 수 있게 하고 싶을 때 제공하는 HTML 파일입니다. 보통 localStorage를 이용해서 값들을 저장합니다.

확장 프로그램 등록

편집기를 열고 아래 내용을 입력한 후 manifest.json 이름으로 저장합니다. 키와 문자열은 반드시 겹따옴표로 둘러 싸야 합니다.
```
{
    "name": "첫 번째 확장 프로그램",
    "version": "0.1.0"
}
```
주소창에 chrome://extensions을 입력하거나 도구 > 확장 프로그램 메뉴를 선택합니다.
개발자 모드를 열고 압축해제된 확장 프로그램 로드… 버튼을 클릭합니다.
manifest.json 파일을 저장한 폴더를 선택합니다.
파일을 추가하거나 수정하면 새로고침 버튼을 누르면 됩니다.

정리

크롬 브라우저에서만 실행할 수 있다는 분명한 단점이 있지만 다른 브라우저를 전혀 신경 쓰지 않고 마음껏 HTML5, CSS3를 실험할 수 있습니다. 웹 개발자에게는 학습 난도가 낮아서 크롬 브라우저를 주로 사용한다면 장난삼아(?) 한 번 손댈만한 것 같습니다.

다음 글부터 브라우저 액션과 페이지 액션을 시작으로 여러 예제를 만들어 보면서 확장 프로그램의 형태와 페이지에 대해 자세하게 살펴보겠습니다.

참고

DEVONthink에서 마크다운 사용하기 | Using Markdown in DEVONthink

Tue, 26 Apr 2011 10:00:05 +0900

DEVONthink에서 바로 만들 수 있는 문서 파일은 Plain Text, Rich Text, Script, HTML, XML, Property List 입니다. 마크다운을 지원하지는 않지만 밖에서 만든 마크다운 파일을 임포트해서 사용할 수 있습니다. 이 과정을 애플스크립트를 써서 자동화도록 하겠습니다.

이전 글에서 말한 대로 한글 마크다운을 제대로 훑어보기 위해서 최상단에 chartset: utf-8을 적어줘야 합니다. 매번 적어주는 일이 귀찮을 테니 마크다운 문서를 만들 때 이 문장을 미리 적은 파일을 임포트합니다.

편집기를 열고 아래 문장을 입력합니다.
```
charset: utf-8
```
/tmp 폴더에 import.markdown 이름으로 저장합니다.

애플스크립트 편집기를 열어서 아래 코드를 입력합니다.

do shell script "touch /tmp/import.markdown"

tell application id "com.devon-technologies.thinkpro2"
    import "/tmp/import.markdown" name "Change this title"
end tell

스크립트 파일을 ~/Library/Application Support/DEVONthink Pro 2/Scripts/Data 폴더에 New Markdown이라는 이름으로 저장합니다.
시스템 설정 > 키보드 > 단축키 메뉴로 들어가서 DEVONthink 어플리케이션에 New Markdown 제목으로 단축키를 지정합니다. 저는 ⌘⌃M을 사용합니다.

스크립트 파일 이름과 저장 폴더는 취향대로 선택하시면 되지만 파일 이름과 단축키 제목은 같아야 합니다.

맥에서 마크다운 사용하기 | Using Markdown in Mac

Mon, 25 Apr 2011 10:31:05 +0900

이 글은 확장 마크다운인 MultiMarkdown을 사용하는 것을 기본으로 합니다. OS X 10.6.7 영문 상위에서 시험했습니다.

마크다운 실행파일

가장 먼저 마크다운의 기본이 되는 실행 파일을 설치합니다.

설치

브라우저를 열고 MultiMarkdown 저장소로 갑니다.
MultiMarkdown-Mac-x.x.x.pkg.zip 파일을 받습니다.
압축을 풀고 패키지 파일을 실행합니다.
/usr/local/bin 위치에 multimarkdown 파일과 mmd로 시작하는 실행 파일들이 설치됩니다.

마크다운 훑어보기

훑어보기(Quick Look)는 맥 파인더에서 해당 프로그램을 실행하지 않고 스페이스 키를 눌러서 파일의 내용을 미리 보는 기능입니다. 기본적으로 지원하는 파일 종류가 다양한데다 다른 사용자들이 개발한 플러그인을 설치해서 확장할 수도 있습니다. 이 플러그인은 .qlgenerator 확장자를 갖습니다.

훑어보기 플러그인 사이트

MultiMarkdown 역시 훑어보기 플러그인을 제공합니다.

설치

브라우저를 열고 MultiMarkdown 저장소로 갑니다.
QLMultiMarkdown.qlgenerator.zip 파일을 받아 압축을 풉니다.
QLMultiMarkdown.qlgenerator 파일이 나옵니다.
모든 사용자에게 적용하려면 /Library/QuickLook 위치에, 현재 사용자에게만 적용하려면 ~/Library/QuickLook 폴더에 이 파일을 옮깁니다.
파인더에서 마크다운 파일을 선택하고 스페이스 키를 눌러서 정상적으로 동작하는지 확인합니다.
동작하지 않으면 터미널을 열고 아래 명령어를 입력한 후 다시 해봅니다.
```
qlmanage -r
```

삭제

훑어보기 플러그인 파일을 넣은 폴더에서 .qlgenerator 확장자를 갖는 플러그인 파일을 삭제합니다.

한글 마크다운 파일 훑어보기

한글이 포함된 마크다운 파일을 훑어보기하면 한글이 깨져서 보입니다. 기술적으로 이해하시려는 분은 How do I create a MultiMarkdown document? - GitHub 문서의 Metadata 부분을 보시기 바랍니다. 가장 쉬운 해결 방법은 문서 첫 줄에 아래 문장을 넣는 것입니다.

charset: utf-8

매번 이 문장을 넣는 것이 귀찮겠지만 나중에 해결하도록 하고 일단 다음으로 넘어가겠습니다.

마크다운 미리보기

작성된 마크다운 파일을 보는 것은 훑어보기로 쉽게 할 수 있지만 문서를 작성 중이라면 훑어보기보다는 미리보기 기능이 필요할 겁니다. 이 기능을 지원하는 Coda, TextMate 등의 편집기들이 있지만 어떤 프로그램을 사용하든 작성하는 사이사이에 쉽게 미리보기가 가능하도록 하고 싶습니다. 오토메이터로 간단하게 서비스를 만들어 보도록 하겠습니다.

오토메이터를 실행합니다.
템플릿에서 서비스를 선택합니다.
Replaces selected text 체크박스를 선택 해제합니다.
왼쪽 라이브러리에서 Run Shell Script를 선택해서 오른쪽 화면으로 끌어다 놓습니다.
아래 문장을 입력합니다. 사파리는 Safari, 파이어폭스는 Firefox로 바꿔서 입력합니다.
```
/usr/local/bin/multimarkdown > /tmp/mmd.html
open -a "Google Chrome" /tmp/mmd.html
```
제목을 Preview MultiMarkdown로 정하고 저장하면 ~/Library/Services 위치에 저장됩니다.
편집기에서 문장을 선택하고 마우스 오른쪽 버튼을 누릅니다.
Services > Preview MultiMarkdown 메뉴를 선택하면 마크다운이 HTML로 변환되서 브라우저에서 보입니다.

단축키 지정

시스템 설정을 실행합니다.
키보드 메뉴를 선택합니다.
키보드 단축키 탭을 선택합니다.
왼쪽에서 서비스를 선택합니다.
텍스트 카테고리 밑에 Preview MultiMarkdown을 찾아서 더블클릭합니다.
원하는 단축키를 지정합니다.

이렇게 단축키를 지정하면 어떤 프로그램을 사용하든 문장을 선택한 후 지정한 단축키를 누르면 미리보기가 가능합니다. 이 방법이 마음에 안 들어서 특정 프로그램에서만 단축키가 동작하게 하고 싶으면 아래와 같이 합니다.

시스템 설정을 실행합니다.
키보드 메뉴를 선택합니다.
키보드 단축키 탭을 선택합니다.
왼쪽에서 응용 프로그램 단축키를 선택합니다.
오른쪽 더하기 버튼을 누릅니다.
원하는 프로그램을 선택하고 메뉴 제목에 Preview MultiMarkdown를 입력합니다.
원하는 단축키를 지정합니다.

삭제

~/Library/Services에 있는 Preview MultiMarkdown 파일을 삭제합니다.

마크다운 링크

마크다운 문서를 작성하면서 가장 많이 하는 일 가운데 하나는 웹 페이지를 모으는 것입니다. 브라우저에서 주소를 복사해서 옮겨 적는 일이 많은데요. 저는 <http://dailyupgrade.me/> 형식으로 주소만 적는 것보다 [Daily Upgrade](http://dailyupgrade.me) 형식을 좋아하는데 매번 이렇게 만드는 것이 귀찮더라고요. 그래서 구글 크롬 확장 프로그램으로 간단하게 만들어 봤습니다. :)

여기에서 설치하시면 되고요. 브라우저에서 아이콘을 클릭하면 문서 제목과 주소가 마크다운 형식으로 클립보드에 복사됩니다. 바로 마크다운 문서에 붙여서 사용하시면 됩니다.

정리

여기까지 맥에서 마크다운을 쓰기 위한 여러 가지 방법들을 적어 봤습니다. 다음에는 제가 맥에서 가장 많이 사용하는 DEVONthink 프로그램에서 마크다운을 사용하는 방법을 얘기하려고 합니다.

마크다운이란? | About Markdown

Fri, 22 Apr 2011 10:00:06 +0900

소개

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

위 문장은 마크다운을 만든 John Gruber의 홈페이지에서 가져온 문장입니다. 이 짧은 문장에 마크다운의 핵심 철학이 모두 들어 있습니다.

읽기 쉽다
쓰기 쉽다.
일반 텍스트 파일이다.
HTML 형식으로 변환한다.

읽기 쉽다

마크다운 형식으로 쓴 글을 보면 종이에 적은 것과 비슷한 느낌을 받습니다. 제목, 목록과 같은 형식을 쉽게 알아 볼 수 있습니다.

쓰기 쉽다

마크다운 문법은 아주 쉽습니다. HTML 문법에 비하면 학습 난이도에서 비교가 되지 않습니다. 생각의 흐름을 방해하지 않고 직관적으로 글을 쓸 수 있습니다. 쓰기 쉽다는 장점은 특히 모바일 시대에 더 두드러집니다. 많은 사람들이 즐겨 사용하는 Evernote, Springpad 같은 메모 프로그램에서도 약간의 수고로 메모를 좀 더 직관적이고 구조적으로 만들어 줍니다.

일반 텍스트 파일이다

파일을 작성하기 위해서 오피스 프로그램을 실행하지 않아도 됩니다. 낯선 곳에서 아래한글이 설치되어 있지 않아서 발을 동동 구를 필요도 없습니다. 메모장에서 적어도 되고 스마트폰을 꺼내서 작성해도 됩니다.

HTML 형식으로 변환한다

작성이 끝난 글은 HTML 형식으로 바꿔서 블로그를 비롯한 온라인 서비스에 쉽게 올릴 수 있습니다. 글의 외관을 꾸미는 일은 HTML로 바꾼 다음에 할 일이고 마크다운에서는 글 쓰는 것에 집중할 수 있습니다.

더 좋은 내용을 보시려면 아래 링크를 참고하시기 바랍니다.

지원

서비스형 블로그

마이크로블로그로 유명한 Tumblr, Posterous에서는 마크다운을 지원합니다.

설치형 블로그

WordPress, TextCube에서는 플러그인을 설치해서 마크다운으로 글을 쓸 수 있습니다.

편집기

TextMate, Coda 등의 편집기에서도 미리보기, HTML로 변환하기 등의 기능이 플러그인 설치로 가능합니다.

기본 문법

마크다운에서 제공하는 문법을 간략하게 적어 보면 아래와 같습니다.

강조

*강조*
**강한 강조**

코드

`한 줄 코드`
(탭 또는 공백4개 이상) 여러 줄 코드

* 순서 없는 목록
* 순서 없는 목록

1. 순서 있는 목록
2. 순서 있는 목록

제목

# 제목 1
## 제목 2
### 제목 3

인용문

> 인용문

링크

[구글](http://google.com/)

이미지

![위키피디아 로고](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)

수평선

***

자세한 문법은 아래 링크를 참고하시기 바랍니다.

확장 마크다운

마크다운이 제공하는 기능은 그 문법만큼이나 단순합니다. 그 부족한 기능을 보강하려는 움직임들이 아래의 확장 마크다운을 만들었습니다.

어떤 것이 먼저 만들어져서 영향을 주었는지는 모르겠지만 두 확장 마크다운의 기능은 매우 비슷합니다. Markdown Extra는 PHP로 만들어졌기 때문에 웹 서비스에 적용하기 좋을 것 같고 저는 맥에서 사용하는 것을 우선으로 하기 때문에 MultiMarkdown을 선택했습니다.

확장 마크다운 문법

두 확장이 공통적으로 지원하는 문법 위주로 간략하게 적도록 하겠습니다.

인라인 HTML

<p>인라인 HTML</p>

HTML 안에서 마크다운 사용

<div markdown="1">
마크다운 안에 *HTML* 블록이 들어갑니다.
</div>

제목 아이디 속성

# 제목 1 {#header1}

코드 블럭

MultiMarkdown, Tumblr에서 지원하지 않습니다. 개발자 입장에서 가장 아쉬운 점입니다. :(

~~~~~~~~
코드 블럭
~~~~~~~~

테이블

헤더 1 | 헤더 2
------|-------
셀 1 | 셀 2
셀 3 | 셀 4

정의 목록

마크다운
:   간단한 마크업 언어로, 일반 텍스트로 문장 구조를 표기하던 관례를 규칙으로 만든 문법이다.

각주

이 문장에는 각주가 들어갑니다.[^1]

[^1]: 첫 번째 각주입니다.

약어

MultiMarkdown, Tumblr에서 지원하지 않습니다.

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

인용

Markdown Extra, Tumblr에서 지원하지 않습니다. 논문을 많이 다루시는 분들에게 필수적인 기능일 것 같습니다.

자유시장에서 우리의 선택은 얼마나 자유로운가?[p. 143][#Justice:2010].

[#Justice:2010]: 마이클 샌델. 김영사. 2010.

정리

이것으로 마크다운과 확장 마크다운에 대한 짧은 소개와 문법 설명을 마칩니다. 마크다운의 철학이 널리 퍼지길 바라면서 다음 글에서는 맥에서 마크다운을 활용하는 법에 대해 적도록 하겠습니다.

Daily Upgrade

Ruby on Rails - full_messages 한국어 처리 | Ruby on Rails - full_messages for Korean

app/models/user.rb

app/views/users/_form.html.erb

config/application.rb

config/locales/ko.yml

레일즈에서 기본적으로 제공하는 문구

문제

필드 이름과 오류 문구 사이의 공백

받침에 따른 조사

필드 이름의 위치

구현

config/locales/ko.yml

레일즈 오류 문구 검색 순서

config/initializers/korean_full_messages.rb

app/views/users/_form.html.erb

참고

크롬 확장 프로그램 개발 - 페이지 액션 | Chrome Extension Development - Page Actions

개요

메시지 전달 (Message Passing)

플래시 극장

wmode 속성

manifest.json

background.html

contentscript.js

결과

사진 갤러리

manifest.json

contentscript.js

gallery.css

background.html

popup.html

결과

정리

참고

지난 연재

크롬 확장 프로그램 개발 - 컨텐트 스크립트 | Chrome Extension Development - Content Scripts

개요

무지개 링크

manifest.json

매치 패턴

rainbow.css

-webkit-animation 단축 형식

페이지 이동 버튼

manifest.json

goto.js

chrome.extension.getURL

정리

참고

크롬 확장 프로그램 개발 - 브라우저 액션 | Chrome Extension Development - Browser Actions

브라우저 액션 對 페이지 액션

구현

manifest.json

아이콘 크기

API

<audio>

background.html

정리

참고

크롬 확장 프로그램 개발 - 개요 | Chrome Extension Development - Overview

웹킷 엔진에서 실행됩니다.

HTML, 자바스크립트, 스타일시트 파일로 이루어져 있습니다.

확장 프로그램 형태

브라우저 액션, 페이지 액션 (Browser Actions, Page Actions)

보조 메뉴 (Context Menus)

옴니박스 (Omnibox)

오버라이드 페이지 (Override Pages)

앱 (Apps)

테마 (Themes)

확장 프로그램 페이지

백그라운드 페이지 (Background Pages)

컨텐트 스크립트 (Content Scripts)

팝업 페이지 (Popup Pages)

설정 페이지 (Options Pages)

확장 프로그램 등록

정리

참고

DEVONthink에서 마크다운 사용하기 | Using Markdown in DEVONthink

맥에서 마크다운 사용하기 | Using Markdown in Mac

마크다운 실행파일

`app/models/user.rb`

`app/views/users/_form.html.erb`

`config/application.rb`

`config/locales/ko.yml`

`config/locales/ko.yml`

`config/initializers/korean_full_messages.rb`

`app/views/users/_form.html.erb`

`wmode` 속성

`-webkit-animation` 단축 형식

`chrome.extension.getURL`

`<audio>`