HTML/CSS에 대해 질문할 때 이렇게 해보세요
될 거 같은데 안되죠?
HTML/CSS 혹은 자바스크립트를 공부하기 시작하다 보면, 무슨 이유인지는 몰라도 의도한 대로 실행이 안되는 경우가 많습니다. 어디서부터 무엇이 잘못되었는지 모른다는건 사실 원인을 찾아가는 기본적인 방법 - 디버깅 하는 방법을 모르기 때문입니다. 물론 당장 처음 HTML/CSS를 공부하기 시작한 사람 입장에선 디버깅이란 용어조차 생소할 것입니다.
오류메세지를 읽어보고 오류에 대한 상황 파악을 어느 정도 할 줄 알게 되어도, 나보다 더 많이 알고 있는 사람 - 업계 선배들에게 문제를 물어봐야 할 상황이 필연적으로 찾아옵니다.
그럴때 사람들은 소스코드를 게시판 댓글에 옮겨붙여넣거나, 화면을 캡쳐해서 올려놓곤 합니다. 그것도 아주 일부분 - 본인이 의심스러운 부분만 옮겨오죠.
원하는 답변을 얻기도 쉽지 않죠?
그런데 이런 방식으로는 원하는 답을 얻기가 수월하지 않습니다. 생각보다 문제의 원인은 아주 다양하기 때문이죠.
전혀 엉뚱한 부분에서 벌어진 일이 다른 곳에 영향을 주는 경우도 빈번하거든요. 그래서 사이트 전체를 들여다볼 수 있도록 사이트 링크를 건내주는 것이 가장 좋고, 일부분만이라도 소스가 실제로 돌아가는 환경에서 보여주는 것이 더 나은 답변을 얻기 좋을 것입니다.
이럴 때 요긴하게 사용할 수 있는 도구들이 있습니다.
CodeSandbox
코드 샌드박스는 아주 다양한 프레임워크와 라이브러리를 지원합니다. 기본적인 HTML/CSS만 보여줄수도 있지만, 코드 샌드박스는 좀 더 폭 넓은 환경을 제공합니다.
아주 인기있는 리액트, 뷰, 앵귤러, Nextjs, Remix와 같은 라이브러리/프레임워크는 물론이고 express, mongodb와 같은 서버와 DB 연동 환경까지 구현해서 돌아가도록 가상 환경을 조성해줍니다.
샌드박스라는 이름답게 다양한 테스트와 시도를 해볼 수 있고, 팀 단위로 협업도 가능하도록 만들어 놨죠. 무척 훌륭한 시스템입니다.
다만 조금 무겁게 돌아간다는 느낌을 주는 부분이 있습니다. 가상환경을 조성해주는 도구이기 때문에, 많은 라이브러리를 불러들이고 구현하다 보니 어쩔 수 없는 부분이 있기 때문입니다. 그래서 간단한 HTML/CSS만 질문하려고 이 도구를 사용한다는 것은 좀 과하다는 느낌이 있습니다.
Codepen
코드펜은 코드 샌드박스처럼 협업도 가능하고 리액트와 같은 라이브러리 연결도 지원하지만 훨씬 가볍습니다. 코드샌드박스는 가상서버 환경을 만들어주기 위해 준비되는 과정이 있지만, 코드펜은 바로 화면에 그려지는 요소에 집중하고 있기 때문입니다.
HTML,CSS,JS 에디터에 내용을 입력하면 바로 화면이 그려집니다. 이런 특징들을 고려해서 내가 간단하게 HTML/CSS에서 어려움을 겪는다면 바로 이런식으로 소스코드를 입력해서 질문하고 싶은 사람들에게 링크만 던져주면 됩니다.
화면 오른쪽 하단에 이렇게 Share 버튼이 있어서 공유할 수 있도록 메뉴를 제공하고 있기 때문에 아주 쉽게 공유가 가능합니다.
코드펜 또한 다양한 외부 라이브러리를 지원하지만, 어디까지나 시각적인 효과를 구현하는데 도움이 되는 수준이라 코드샌드박스에 비하면 가벼운 수준입니다. 개인적으로는 아주 가볍게 쓸 수 있어서 코드펜이 더 마음에 듭니다. 더 흥미로운 부분은 이미 다른 사람들이 만들어놓은 소스코드를 찾아볼 수 있는데 실험적인 요소들이 많아서 이런것도 가능하구나 라면서 흥미롭게 볼 수 있는 재미있는 부분들이 많습니다.
요약
코드샌드박스 CodeSandbox
프론트엔드 - 리액트, 앵귤러, Vue 등 또는, 서버사이드(nodejs)에 대한 내용을 공유, 질문을 해야할때 사용하기 편리합니다.
코드펜 Codepen
HTML/CSS, 간단한 DOM - 화면상에 보여지는 요소를 제어하는 수준의 자바스크립트에 대한 공유, 질문할때 편리합니다.