작업 노트 #2 IUEditor
아이유에디터(IUEdiotr) 사용하기
웹사이트는 있지만 반응형은 아니고... 모바일 페이지는 필요하지만 웹사이트를 전체 개편할 시간은 없고...
네이버 모바일 페이지와 같이 데스크톱 페이지와 별개로 가기로 결정했을 때 껍데기 페이지만 디자인할 게 아니라 간단한 기능은 구동 가능한 html 파일로 개발자에게 넘겨줄 수 있는 방법을 찾고 있었습니다.
아이유에디터(IUEditor) 사용하기
정적인 웹사이트야 디자인해서 그대로 개발해 달라고 하면 되지만 인터렉션을 넣거나 모바일 환경에서 어떤 식으로 보일지에 대한 내용들은 막상 디자인을 해도 어떻게 전달해야 할지 고민되기도 하고 그런 세세한 부분까지 반영할 개발 여유도 없었습니다. html을 배워보고 있지만 기껏 해봐야 글줄이나 색상, 테이블 수정 정도만 가능해서 결국 다시 도구를 찾게 되었습니다.
IUEditor를 찾게 된 이유
웹페이지 디자인을 스케치로 작업하고 제플린으로 보내고 있지만 뭔가 아쉽다.
html을 직접 짜고 싶은데 영 녹록지가 않다.
뮤즈, 기타 웹페이지 에디터들을 사용해봤지만 뭔가 까탈스럽다.
간단하지만 간단하게 만들어지지 않는 웹 효과들을 주고 싶다.
페이스북 광고로 처음 접해 본 IUEditor는 깔끔한 GUI에 직관적인 인터페이스를 가진 것처럼 보였으나 곧바로 배워서 써먹기는 어려워 보여서 공개 강의를 신청해 들었습니다.
6. 22. IUEditor 공개교육실제로 수업을 가장 기초적인 부분부터 들어보니 의외로 간단합니다. 툴 내에서 제공하는 기능 안에서만 작업을 한다면 러닝 커브는 꽤 낮습니다. 다만 조금이라도 가이드를 벗어난 것들을 시도해 보려고 하면 응용해 보거나 노가다를 해야 하는데 이게 꽤 시간이 걸립니다.
장점
어도비 뮤즈를 사용했을 때 보다 직관적이다.
작업하고 나서 저장만 해두면 HTML 파일이 미리 추출되어있다.
사용할 수 있는 위젯들이 실용적이다. 커스텀할 수 있는 부분은 섬세하기보다는 투박하지만 필요한 만큼은 고쳐서 쓸 수 있다.
반응형 페이지로 작업할 때 매우 간편하다.
페이스북 페이지를 통한 피드백이 빠르다.
작업이 끝나면 같이 저장된 html 파일을 전달해 주기만 하면 된다.
뮤즈보다 편하다
Adobe Muse2014년에 어도비 뮤즈를 알게 되어 간단한 개인 웹페이지를 작업해 본 적이 있었습니다. 저에겐 유용하면서도 복잡하고 가볍지 않은 프로그램이었는데요. 무엇보다 제공하고 있는 위젯들을 커스텀하는 게 너무 어려웠습니다.
IUEditor에서 예를 들자면 위젯으로 계속해서 이미지가 바뀌는 박스를 만들고 싶을 때
위젯 Carousel을 사용할 때 고쳐쓸 수 있는 기능들이 정도의 커스텀 기능을 갖고 있었습니다. 많이 사용하는 기능들을 앞에 보이도록 만들고 있다고 합니다.
Structure 기능
포토샵의 레이어 기능을 담당하는 Structure는 처음에는 어려웠지만 레이어와의 차이점을 이해하고 나서는 작업하기에 간편해졌습니다.
차이점픽셀이 아닌 비율(%)로 작업하기
포지션과 사이즈에 퍼센트(%) 단위를 제공하는 것도 굉장히 유용했습니다. 제플린으로 작업을 넘길 때 반응형 때문에 단위를 퍼센트로 달라는 요청이 많았었는데 IUEditor에서 작업을 하면서 퍼센트에 대한 개념을 익힐 수 있었습니다. 스케치나 제플린에서는 퍼센트로 값을 볼 수가 없어서 IUEditor로 가져온 뒤에 값을 재보곤 했습니다. (현재는 업데이트되어서 제플린에서도 퍼센트 값을 볼 수 있습니다.)
단점
작업의 90%는 어렵지 않게 작업이 가능하다. 나머지 10%를 구현해보려고 90%를 만드는 시간보다 더 많은 시간을 들이게 된다.
아직 위젯들이 부족하다. 있을 것 같은 데 없는 위젯이 많다.
미묘한 버그가 많다. 오브젝트를 복사해다가 새 파일에 옮겨 붙이면 멀쩡해지기도 한다.
작업하고 나서 생긴 HTML 파일을 그대로 사용하면 예전에 사용했다 삭제한 소스들도 그대로 남아있어서 무겁다. 매번 지웠다가 새로 생성시켜야 깔끔하게 만들어진다.
이유를 모르는 오류
아까까지만 해도 잘 작동했었는데 잠깐 다른 작업하고 돌아오니 제대로 동작하지 않는 경우가 꽤 있었습니다. 새 페이지를 열어서 다시 차근차근 채워야 원래대로 돌아오곤 합니다.
조금 아쉬운 Panel 기능
Panel은 모바일 페이지에서 햄버거 메뉴를 만들어주는 기능인데 각각의 페이지마다 panel이 공유가 되지 않아서 일일이 복사, 붙여 넣기를 해야만 했습니다.
언어 변경 기능이 있었으면..
언어 변경 기능에 대해 질문했었는데 현재로선 백앤드를 연결하거나 똑같은 페이지를 하나 더 만들어야 한다고 합니다. 차라리 기본 텍스트 위젯부터 언어별로 저장하고 변경할 수 있는 기능이 있으면 편하지 않을까 싶네요.
다른 환경, 다른 경험
(좌)아이폰에서의 사파리 브라우저 / (우)맥에서의 사파리 브라우저Crousel 위젯으로 만든 페이지입니다. 하단의 동그라미가 아이폰에서는 찌그러져 나옵니다. 브라우저, 사용 환경에 따라 의도하지 않은 형태로 나오기도 합니다.
IUEditor를 통해서 제노플랜 모바일 페이지는 작업을 끝낼 수 있었습니다. 모든 부분을 커버할 수는 없었지만 적정선을 조율하여 필요한 만큼만 작업한다면 다른 웹에디터 툴보다 효과적일 수 있겠다고 생각합니다.
