본문 바로가기

실시간 css html 에디터 사용해보기

퍼블리싱 작업을 할 때에는 당연히 css와 html을 사용해서 하게 된다.

매번 코드를 입력을 하고 화면 갱신을 해서 확인을 해봐야 한다.

물론 리얼타임을 지원하는 에디터나 프로그램일 경우는 다르겠지만 나는 드림위버등으로 작업을 하지 않기 때문에 갱신을 많이 한다.

번거로운 부분도 있기는 한데 워낙 오래전부터 그렇게 작업을 해와서 그런지 그정도의 불편함을 느끼질 못한다.

대략적으로 코드는 머리속에 그려지니 말이다.

실시간 css html 에디터 사용해보기

웹상에서 풀코딩을 쳐 본적은 드물기 때문에 에디터로 그냥 작업을 해놨었는데 최근 들어서 실시간으로 빨리 작업을 할 경우가 생겼다. 

바로 치고 바로 보여주고 하는 상황이 잦아져서 이러한 부분에 대해서 지원을 하는 서비스가 있는지 찾아보게 되어서 사용중이다.

퍼블리싱 작업을 위해서는 여러 페이지의 웹사이트를 만들기도 하지만 랜딩페이지나 설문조사등의 한페이지 짜리도 하게 된다.

온라인에서 실시간으로 입력을 하고 화면을 확인하면서 하게 되면 css 적용하는데 조금은 편리해 진다.

scratchpad.io가 그러한 서비스를 제공 하는 곳 중의 하나이다.

왼쪽은 css와 html을 입력할 수 있는 란이 있고 오른쪽은 프리뷰가 있어서 실시간으로 반영이 된다.

화면 구성은 간단하다. 복잡할 이유도 없고.

입력을 하게 되면 따로 저장이 되는 부분은 없는데 왼쪽에 이전에 작업해놨던 내역이 있게 된다.

따로 css editor로 작업을 하기 위해서 로그인이 필요하거나 뭔가 설치해야 하거나 하는 경우가 없기 때문에 간편하게 쓸 수 있다.

주로 나는 폼 입력 같은 화면을 만들 때 이리저리 적용을 해볼 때 사용을 한다.

이전에 작업하다 만것들이 있는데 뭐 쿠키등으로 기억해놨다가 적용을 하는가보다.

아무튼 실시간으로 퍼블리싱을 해봐야 할 때 바로바로 한눈에 보면서 변경이 된 부분을 확인을 하고 다 작성이 되었으면 복사해서 실제 소스코드에 붙여서 정리를 하면 되겠지.

반응이 거의 딜레이가 없는 수준이라서 나는 만족을 하면서 쓰고 있다.

http://scratchpad.io

뭐 codepen이나 jsfiddle, jsbin  등을 활용을 해도 된다.

작업을 할 때는 단 1분이라도 10초라도 좀 더 효율적으로 빠르게 당길 수 있으면 그렇게 하는 것이 제일 좋다고 생각한다.

그 조각의 시간이 모여서 어차피 전체의 시간이 되고 전체의 시간이 전체의 작업기간이 되고 작업기간은 견적이 된다.

난이도의 차이는 있겠지만 말이다.