CodePen 온라인 코드 편집기
텍스트로만은 설명하기가 부족한 부분이 있어서 별도의 시연 동영상을 유튜브에 따로 올렸으니 참고바랍니다.
요즘에는 로컬에 복잡하게 개발 환경을 구축하지 않고 대신 온라인에서 코드 편집이 가능한 도구들을 많이 사용하는 것 같습니다. 이러한 온라인 코드 편집기 중에서도 거의 원조격에 해당하면서 꾸준하게 전 세계적으로 많은 개발자들에게 사랑받고 있는 CodePen에 대해서 알아보겠습니다.
CodePen이란?
CodePen을 한마디로 정의하면 프론트엔드(frontend) 웹 개발에 특화된 온라인 코드 편집기입니다. 프론트엔드(frontend) 웹 개발에는 3대장 기술있죠? 바로 HTML, CSS, JavaScript인데요. CodePen에서는 기본적으로 이 3개의 언어로만 코딩을 할 수 있으며 그 밖에 다른 백엔드(backend) 언어를 사용해야하는 경우에는 CodePen말고 다른 온라인 코드 편집기를 사용하셔야 하오니 주의바랍니다.
Pen vs. Project vs. Collection
CodePen에 로그인 후 화면 좌측을 보시면 Pen, Project, Collection 이렇게 3개의 작업 단위를 볼 수 있는데요. Pen은 간단한 웹페이지를 뚝딱 만들어 보기에 적합하고, Project는 비교적 복잡한 웹페이지나 여러 개의 파일로 이뤄진 하나의 웹사이트를 구성할 때 사용합니다. Collection은 여러 개의 Pen이나 Project를 담아놓는 폴더나 디렉토리 정도로 생각하실 수 있습니다.
무료 계정으로 Pen은 무한대로 만들 수 있지만 Project는 최대 10개까지 밖에 만들지 못합니다. 아무래도 제약 사항이 있다보니 CodePen에서 Project를 사용하는 경우는 그렇게까지 많이 보지는 못한 것 같고요. 대부분 CodePen을 온라인에서 간단하게 웹페이지를 만들어보는 용도로 사용하기 때문에 Pen이 훨씬 더 많이 사용되고 있는 것 같습니다. 그래서 본 포스팅에서는 Pen을 기준으로 사용법에 대해서 좀 더 자세히 설명을 드리도록 하겠습니다.
편집기 화면
편집기 화면은 HTML과 CSS, JavaScript 그리고 미리보기 이렇게 4개의 영역으로 분할이되는데요. 코딩을 하면서 각 영역을 수시로 접어놓거나 열어놓을 수 있고, 유연하게 영역의 크기도 조정할 수 있습니다.
각 영역에는 코드 포맷팅과 코드 검사 기능도 지원하고 있어서 코드를 보기 좋게 유지하고 오류를 찾는데 유용하게 사용할 수 있습니다.
HTML 영역
HTML을 편집할 때 <!DOCTYPE>이나 <html>, <head>, <body> 요소는 모두 생략할 수 있습니다.
<head> 요소 안에 어떤 요소를 삽입하고 싶다면 HTML 영역에서 톱니바퀴 아이콘을 클릭하면 가능합니다.
여기서 마크다운(markdown)과 같은 HTML 전처리기도 설정할 수 있으니 참고바랍니다.
CSS 영역
톱니바퀴 아이콘을 클릭하면 SCSS나 PostCSS와 같은 CSS 전처리기를 사용하도록 설정할 수 있습니다. 뿐만 아니라 Bootstrap과 같은 CSS 라이브러리로 쉽게 찾아서 CDN을 통해 불러올 수 있습니다.
JavaScript 영역
Babel이나 TypeScript와 JavaScript 전처리기를 사용하기 싶다면 마찬가지로 톱니바퀴 아이콘을 클릭하면 됩니다. CSS 영역에서 처럼 외부 자바스크립트 라이브러리도 쉽게 찾아서 CDN을 통해 불러올 수 있으며, 심지어 npm을 통해 설치할 수 있는 패키지도 불러올 수 있습니다.
브라우저 콘솔
좌측 하단에 Console 버튼을 클릭하면 console.log() 함수 등을 이용하여 브라우저에 콘솔에 출력한 내용을 볼 수 있습니다.
디버깅을 할 때 매우 유용하겠죠?
편집기 모드
우측 상단의 Change View 버튼을 클릭하면 편집기 모드를 전환하거나 레이아웃을 변경할 수 있는데요.
저 같은 경우, 코딩할 때 주로 Editor View를 사용하되, 다른 사람에게 시연해야할 때 Debug mode로 변경합니다.
작업물 공유
내 작업물을 다른 사람과 공유하고 싶다면 우측 하단의 Share 버튼을 클릭하면 됩니다.
내 작업물을 개인 블로그나 다른 웹사이트에 넣고 싶다면 Embed 버튼을 클릭하면 됩니다.
작업물 복제
CodePen에서 다른 사람의 작업물을 공부하고 싶을 때가 있는데요.
우측 하단의 Fork 버튼을 클릭하면 해당 작업물이 내 계정으로 그대로 복제됩니다.
마치면서
이상으로 CodePen의 왠만한 기능은 다 살펴본 것 같은데요. CodePen을 이용해서 할 수 있는 일들이 정말 많은 것 같죠?
다양한 온라인 에디터가 속속들이 등장하고 있지만 CodePen 만큼 간편한 도구는 없는 것 같습니다. CodePen을 잘 활용하시는데 이 포스팅이 조금이나마 도움이 되었으면 좋겠습니다.
This work is licensed under CC BY 4.0
