jquery-ui 의 datapicker 를 모바일에서 사용시 input 을 클릭시 달력이 안나오는 경우가 있다.
이런 경우 input readonly = "readonly"로 되어 있는지 확인후 삭제하면 정상으로 노출된다.
몇년전에 고객사에서 기획안이 날라 왔는데, 처음보는 형식의 기획안이었다.
사이트의 구조나 요소들의 배치 등을 연필로 종이에 그린 것처럼 만들어서 보내준 것이다. 이전에는 그리드 종이에 색연필로 스케치 했던 것을 프로그램을 이용하여 만든 것이었다.
와우!! 그래서 이게 UI Mockup 디자인 도구구나!!! 그래서 한참 검색을 해서 WireframeSketcher라는 것을 알아냈다. 그 이후로 여러가지 써 봤지만, 역시나 많이들 쓰는 이유가 있구나라고 이 프로그램이 제일 괜찮은 것 같았다.
물론 그 이후로 사용은 안 했지만, 아루래도 요즘 시간이 많이 나서, 이것저것 작업툴들을 정리하고 메뉴얼을 정리하던 중에 이 프로그램을 다시 사용을 하게 되었다.
제작사는 http://wireframesketcher.com 이다.
처음 들어가면 아래와 같은 사이트가 나오는데, 여기서 다운로드하면 된다. windows, Mac, 심지어 Linux 에서 사용가능하다.
1. 자신의 운영체제 맞는 설치 프로그램을 다운받으면 된다.
2. 다운받은 화일을 설치한다.
특이하게, ProgramFiles 폴더가 아니라 User 폴더 아래에 디폴트 되어 있는데, 원하는 드라이브와 폴더를 선택하여 설치가 가능하며, 131.9M 가 필요하다
3. 설치후 작업저장폴더를 지정할 수 있다. 아무래도 시스템을 포맷해도 지장을 받지 않는, C드라이브 말고, 다른 드라이브에 설치하는것이 안전할 것 같아서 D드라이브에 설치했다.
4. Tutorial 에서 원하시는 작업을 누르시면서, 기능을 알아 보실 수 있습니다.
5. 프로그램의 레이아웃에 대해 간단한 소개를 확인할 수 있습니다.
6. 여러 프로젝트를 확인하고, 열수 있는 창입니다.
7. 새 프로젝트를 생성한다.
아래와 같이 샘플 작업에서 미리 만들어져 있는 것을 복사해서 본인이 새로 생성한 프로젝트의 Screen에 붙여서 수정하여 사용하는게 훨씬 빠르고 프로그램 익히기에도 괜찮은 것 같다.
*주) 여기서 Screen은 홈페이지 제작시 필요한 페이지라고 생각하면 된다. 아래 자세히 보면 Screen가 폴더에 생성되어 있는데요, 즉 폴더는 사이트의 서브디렉토리라고 이해하시면 빠를 것 같습니다.
8. 로고를 넣어 보겠습니다.
로고를 클릭하면 왼쪽 하단에 Outline에 요소에 대한 속성을 볼 수 있으며, 수정도 가능합니다.
9. 메뉴에 링크를 걸 수 있습니다.
메뉴를 클릭하면 해당메뉴에 대한 속성이 나오며, 여기서 수정하시면 됩니다.
메뉴에서 오른쪽 마우스 클릭하고 하단에 link를 클릭합니다. 좌측에 폴더별 화일별로 링크를 걸어, 웹서버에서 볼 수있는 것 처럼 확인 가능합니다.
링크를 클릭하면 해당페이지가 오픈됩니다.
10. 요소삽입 및 관리
1) 요소 삽입시 오른쪽 마우스로 Quick Add로 간편하게 필요한 요소를 삽입할 수 있습니다.
2) 오른쪽 Pallet 창에서 삽입요소를 카테고리화해서 보여줍니다.
예를 들어 input 를 누르면 하단에 관련 요소들이 나옵니다.
심지어 브라어저에서 스크롤 되는 위치도 지정할 수 있습니다.
요소가 중첩될 때, 특정요소를 Lock을 걸어 움직이지 못하게 할 수 도 있습니다.
-* -------------------------------------------------------------------------*-
사용법을 익히는데에 난이도는 중정도 되겠네요. 본인이 할려고 하는 작업이 거의 다 되는것 같습니다. 작업을 진행하면서 찾아보면 무리없이 사용이 가능할 것 같습니다.
추후 또 특별기능을 찾아낼 경우 업데이트하도록 하겠습니다.
1. 바이오스 비밀번호 찾기 위해 수은전지까지 빼봤지만 안되더군요.
2. 비밀번호 일부러 오류내서 system 번호 적어놨다가 첨부화일 실행시키면 됩니다.
3. 실행 후 4개정도의 비밀번호가 나오는데, 맨 위에 나오는 패스워드가 자신의 것입니다.
pwgen-5dec.zip