친절한효자손 취미생활

[어도비 뮤즈] 디자이너들을 위한 홈페이지 및 모바일 앱 디자인 프로그램


본 내용은,

Adobe Muse, HTML,CSS 코딩 할 줄 몰라도 홈페이지 및 어플리케이션 레이아웃을 구성 할 수 있다,

자바스크립트 몰라도 만들 수 있는 웹방식 어플 제작 프로그램,

웹디자인 프로그램

과 관련이 있습니다.




새로운 포스팅의 시작입니다^^


이번에 소개해 드릴 프로그램은, CC 2015부터 새롭게 추가가 된, 어도비뮤즈 라고 하는 프로그램 이구요,

어도비사에서 출시된 프로그램 중 하나입니다.




어도비 뮤즈의 실행화면 입니다.

툴바를 보시면 아시겠지만...상당히 별거 없습니다....


그럼, 어도비 뮤즈는 무엇에 쓰는 물건인고???




예를 들어서, 저같은 경우는, 지금도 꾸준히 자바스크립트를 배우고는 있지만,

실질적으로...응용하는 것들이 많이 어렵습니다...ㅠ_ㅠ 프로그램 코딩도 어렵구요~!


특히나, 어플은 UI가 생명인데, UI의 디자인은 할 수는 있는데,

배치와 애니메이션 효과를 줄 수 있는 기술력이 부족합니다.


이런 저는 그러면...주구장창 디자인만 해야하나요?? 아닙니다.

그래서 나온 프로그램이 어도비 뮤즈 입니다^^


배치를 잘 해주도록 도와주는 프로그램 이죠.





간단하게 한번 구현해 볼께요. 말로는 잘 모르니까,

우선 이런걸 한번 만들어 볼까요? 후훗!


어도비 프로그램들은 다 똑같죠???

Ctrl + N 눌러서 새 파일을 생성하시거나, File > New Site 로 들어갑니다.





그러면, 이렇게 창이 하나 뜨는데,

Initial Layout 에 보시면, 웹과 태블릿, 모바일(Phone) 이 나옵니다.


자신이 최종적으로 넣을 플랫폼을 선택하면 되는 것입니다.


그 바로 밑에, 크기를 설정하는 항목이 나오구요,

가장 아래에, 언어를 선택하면 되는 것입니다.





새로운 문서를 생성하면, 이런 화면으로 변합니다.

여기까지도 아직은 잘 모르겠군요... 그죠????





자, 홈이라는 A-Master 문서에 마우스를 갖다 대어 보면,

좌/우/아래 에 + 버튼이 생깁니다.





밑에 있는 +버튼을 누르면, 이렇게 밑으로 이어지는 문서하나가 새로 생성이 됩니다.


제가 구상한 화면은, 제일 위에가 어플 실행하면 첫 화면으로 보여질 부분,

한번 터치하면 그 다음 화면이 바로 아래 화면이 되도록 해보고 싶은 것입니다^^





이런식으로 여러 페이지를 생성할 수 있는 것입니다.

원하지 않는다면, 선택하고 Del 해서 지우면 되구요^^





저 기능이 정말 뮤즈의 핵심이라고 할 수 있는데요,

위젯 라이브러리 라고 하는 곳입니다.


여기서 바로 우리가 원하던 기능을 쓸 수 있는데요,

아래 캡쳐이미지를 보시면 아실 수 있을겁니다^^ 한번 보세요!



0


보셨나요??? 터치만 하면, 해당 부분이 보여지면서 나머지는 숨겨지는 이런 액션 스크립트!


자바스크립트를 할 줄 몰라도,

이렇게 드래그만으로 끌어다 놓기만 하면 바로 구현이 됩니다^^


세부적인 조정들은, 물론 프로그램을 좀 아신다면 더욱 디테일하게 조절할 수 있겠지만,

저처럼 아직 조금 부족하거나, 아예 모르시는 분들은, 이렇게 기본적인 스크립트 레이아웃을 구현 할 수 있는 것입니다^^


이것이 어도비 뮤즈의 가장 큰 핵심 입니다^^



그러면, 틈틈히 뮤즈 공부를 하고 알려 드리도록 하겠습니다.

원해 주세요^^




공유하기

facebook twitter kakaoTalk kakaostory naver band