HV 링크 (현재 리메이크를 진행중이라 페이지가 없습니다)

HTML CSS 제작은 힘들고, 귀찮고, 오래걸리는 일입니다.
이를 획기적으로 줄여줄 수 있는 서비스, HTML Visualize를 소개합니다.

설명

HTML Visualize (HV)는 이름처럼 HTML을 시각화해서 제작할 수 있게 해줍니다

HTML과 CSS는 코드를 직접 작성해서
제작해야 하기 때문에 시간이 걸리고 어려울 수 밖에 없습니다.

하지만 HV는 웹사이트 상에서 컴포넌트를 추가하고 삭제하면서
코드를 작성하지 않고 웹사이트를 제작할 수 있게 해줍니다.
때문에 코딩을 거의 모른다 해도 웹사이트를 만들 수 있습니다.

만약 웹사이트를 만들어 보고 싶은데 초보라 잘 모르거나 힘들다면
HV를 이용해서 손쉽고 빠르게 자신의 웹사이트를 제작해 보는걸 추천드립니다.

또한 팀 프로젝트를 진행하고 있다면 HV가 큰 도움이 될것입니다.

일반적으로 팀에서 웹 디자이너가 사이트 디자인 해서
이를 웹 퍼블리셔나 웹 개발자에게 전달을 하면

이를 웹사이트로 만들어야 되기 때문에
시간을 상당히 소비히게 될겁니다.

하지만 HV는 완성된 결과물을 코드로 변환해서 제공해주기 때문에
결과물을 개발자에게 전달해주면 이를 복붙해서 거기에 기능개발만 하면 끝입니다.

서비스 제작에서 한단계를 스킵해버리는 수준이기 때문에
엄청난 속도 향상을 볼 수 있을겁니다.

사용법

HV는 로그인 후 새 HV를 만들면 모바일 뷰로 시작하게 되고
이는 상단바에서 변경이 가능합니다.

컴포넌트를 추가하고 싶다면 추가하고 싶은 곳을 클릭하고
왼쪽에 있는 컴포넌트 창에서 원하는 요소를 추가하면 됩니다.

컴포넌트를 클릭하면 스타일 편집창이 나와서
원하는 스타일로 편집이 가능합니다.

스타일에는 잘못된 값을 입력하면 전 값으로 돌아가고
제대로 작성하면 스타일이 변경됩니다.

혹시나 스타일을 바꿔서 요소가 보이지 않거나 선택이 불가능하게 되더라도
컴포넌트 창 옆에 레이어 창을 클릭하면 레이어 형식으로 요소를 확인할 수 있게 됩니다.

컴포넌트는 Copy(ctrl+c), Paste(ctrl+v), Undo(ctrl+z), Redo(ctrl+shift+z), Delete(del) 기능이 있어서 더욱 손쉽게 제작이 가능합니다.

아쉽게도 모바일에서 개발은 불가능 하지만
제작한 HV를 모바일에서 확인하는 것은 가능합니다.

클릭 이벤트 혹은 데이터를 가져오는 기능처럼 디테일한 기능은
완성된 HV를 웹 개발자에게 전달해서 기능 추가만 하면 끝나기 때문에
디테일한 기능을 제작 하기보다는 디자인을 제작하는데 수월하게 만들어 졌습니다.

앞으로 추가될 기능

현재 출시된 HV는 beta 버전으로 앞으로 더욱 많은 기능이 추가 될 겁니다.

1. 친구 추가 후 프로젝트 제작에 참여시켜서
   나와 동시에 개발이 가능하는 기능을 추가할 겁니다.
2. 나만의 HTML UI요소를 만들어서 이를 다른 사람에게 공유하고
   다른 사람이 공유한 요소를 가져와서 사용 가능한 기능을 추가할 겁니다.
3. 드래그 앤 드롭 방식으로 요소를 옮길 수 있는 기능을 추가할 겁니다.
4. 초보자 모드와 개발자 모드를 만들어서 초보자 모드에서는
   CSS에 대해 모르는 사람이 봐도 무슨 역할 인지 알 수 있는 모드를 만들 겁니다.

개발과 관련하여

beta 버전이기 때문에 예상치 못한 버그가 발생할 수 있습니다.

만약 버그가 발생한다면 이에 대해 메일을 보내주신다면
최대한 빠른 시일내로 수정을 하도록 하겠습니다.

또한 HV는 1인 개발로 저 혼자서 전부 제작을 했습니다.
이로인해 업데이트 속도가 조금 느릴 순 있겠지만
사용자의 의견을 적극 수용하여 서비스를 제작 하겠습니다. 감사합니다.

제작자 Email - cwstbp0426@gmail.com

HV 링크