제목이 너무 길다. ㅎㅎㅎ

웹애플리케이션에서 사용자들이 글을 작성할 때 편리하게 사용할 수 있는 웹에디터를 제공하면 서비스의 질을 향상시킬 수 있다. 이 글은 루비온레일스 프렘임워크를 이용하여 웹애플리케이션을 개발할 때, 요즘 Bootstrap 분야에서 급부상하고 있는 WYSIWYG 웹에디터인 Summernote를 사용하는 방법과, 로컬이미지를 글 중에 삽입할 때, Summernote의 기본상태에서 이미지 파일을 Base64로 인코딩하여 DB에 저장하는 방식 외에, 별도로 이미지 파일을 서버로 업로드한 후 해당 링크를 에디터로 삽입하는 방식에 대해서 경험한 내용을 설명한다.

웹어플리케이션을 제작할 때 퍼블리셔는 프론트엔드를 제일선에서 담당하는 매우 중요한 역할을 수행한다.

레일스를 이용해서 웹개발할 때도 예외는 아니다. 그러나 레일스는 MVC 디자인 패턴이 완벽하게 통합되어 있어서 뷰(view)단에서 퍼블리셔의 능력을 한껏 발휘할 수 있다. 또한 bootstrap-sass 젬 덕분에 레일스에서 Twitter Bootstrap을 매우 쉽게 사용할 수 있고 simple_form 젬과 함께 사용하면 뷰단의 디자인을 비전문가의 입장에서도 비교적 간단하게 해결할 수 있어 매우 편리하다.

그러나 simple_form 젬을 처음 사용할 때는 `wrapper` 클래스에 대한 이해 부족으로 라디오버튼과 체크박스 표시를 자유자재로 사용하기 힘들다.

이 글에서는 예제 코드를 통해서 하나씩 해결해 보도록 하겠다.