본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
연관수업 : 생활표현>모델링>pencil
모델링이란?
모델링이란 건축에서 주로 사용하는 말인데, 실제로 만들어보기 전에 작은 사이즈로 만들어봐서 설계상의 하자는 없는지, 또 미학적으로는 만족스러운지, 더하거나 제외할 기능은 없는지를 미리 가늠해보는 것을 의미한다. 시제품이라는 의미에서 프로토타입이라는 표현도 사용하는데, 약간씩 다른 의미를 가지고 있다.
이번 시간에 함께 만들어 볼 UI 모델링은 통상 '기획서'라고도 부르고, '스토리보드' 혹은 '와이어 프래임'이라도 부른다. 이것들의 의미는 다르게 사용하는 경우도 있고, 같은 의미로 사용하는 경우도 있지만, 생활코딩 실습의 컨셉은 협업을 위한 프로세스의 '표준화'가 아니라 하고자 하는 것을 스스로 해내는 '자립'이기 때문에 개념의 차이에는 개의치 않는다. 중요한 것은 만들기 전에 직접 그려보고, 그것을 바탕으로 다른 사람들과 의견을 나눠보고, 또 아이디어를 발전시켜나가야 한다는 것이다.
UI란?
User Interface의 약자다. 유저 인터페이스란 버튼이나, 콤보박스나, 슬라이더와 같은 것들을 의미한다. 이것들이 하는 역할은 사용자의 의지를 컴퓨터에게 전달해서 동작하도록 하는 것이고, 반대로, 시스템의 상태나 명령의 결과를 사용자에게 알려서 판단할 수 있도록 도와주는 역할을 하는 것이다. UI를 미리 그려본다는 것은 사용자에게 전달하고자 하는 가치와 경험을 궁리해보는 가장 일반적인 방법이다.
Pencil
Pencil은 프로그램이나 앱이나 웹서비스와 같은 소프트웨어의 UI를 쉽게 그릴 수 있도록 도와주는 소프트웨어다. 자주 사용하는 UI를 미리 준비해두고 있어서 UI를 기획하는 입장에서는 단지 마우스로 잡아서 놓기만 하면 기획서가 만들어진다. 기획에서 가장 중요한 것은 속도다. 그것은 단순히 빠른 개발을 위한 것이 아니라, 생각이 거침없이 흘러가게 하려면 반드시 필요한 것이다. 생활표현에서는 Pencil에 대한 수업을 제공하고 있다. 상용이지만 더 많은 기능을 제공하는 Balsamiq에 대한 수업도 함께 들을 수 있다. 어떤 도구를 사용해도 무방하다. 사실 제일 좋은 건 종이와 연필이다. (생활표현 모델링 수업)
구상이 귀빠진 날
구상은 머릿속의 도화지에 그린 그림이다. 이 그림을 현실로 가져오는 가장 좋은 방법은 일단 그려보는 것이다. 프로그래밍은 지루하고 반복적인 값비싼 활동이다. 그래서 실제 구현하기에 앞서서 모델링을 해보는 것이다. 생활코딩의 자바스크립트 수업을 담을 컨테이너가 어떤 모양이면 좋을지 그려보자. 각자 그려봐도 좋고, 샘플 그림을 따라서 그려봐도 좋다.
pencil 모델링 파일 (pencil은 파일연결이 잘 안된다. 다시 말해서 이 파일을 더블클릭해서 열지 말고, pencil내의 open 명령을 이용해서 파일을 직접 열자)
참고 필자가 속한 팀에서는 아이디어를 가진 사람이 Balsamiq을 이용해서 화면을 그려보고 회의 시간에 아이디어를 교환한다. 그러다 이견이 있으면 다른 생각을 가진 사람이 직접 이 도구를 이용해서 화면을 그리면서 다른 사람에게 설명을 한다. 직접 그리는 것 보다 빠르고 정확하게 그릴 수 있고, 같은 화면을 보고 있기 때문에 생각을 동기화하는데 도움이 된다. 또 google drive라는 파일 공유 도구로 모델링된 파일을 공유하기 때문에 일일이 파일을 공유할 필요도 없고, 파일이 변경되면 구성원들에게 실시간으로 공지된다.
