웹 애플리케이션 만들기 실습

UI 모델링

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 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라는 파일 공유 도구로 모델링된 파일을 공유하기 때문에 일일이 파일을 공유할 필요도 없고, 파일이 변경되면 구성원들에게 실시간으로 공지된다.

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
  1. 제가 많이 초보라서 그런거 일수있는데
    용어들을 들을 잘 모르겠습니다
    시스템이니 슬라이더니 콤보박스니 버튼이니
    전문용어가 많네요 ㅠㅠ
    완전초보자가 그런것들 알아들을수있는 공부할곳이나 책이 있나요?
  2. sadf
    asdfasdfasdfsadfsadf
  3. 움바야
    세로선 뭘로 그리신건가요 따라서 해보려고 하는데 free line과도 좀 다르고 straight line과도 조금 다르더라구요
    (Common shapes 에있는 straight line 랑 free line 써보았습니다.)
    properties 에서 보면 free line 이라고 나오는데 제가 사용한 free line 와는 properties 창에서 나오는 탭의 종류가
    매우 차이납니다 제가 사용한 free line 의 경우에는 common, Border, text, text(cont.) 이렇게 4가지 종류의 탭이 있는데 나와있는 세로선의 경우에는 Border 탭 하나 밖에 없는 점이 다르네요
    혹 사용하는 pencil 소프트웨어의 버전의 차이에 의해 이런일이 생길수도 있나요?
  4. nJino
    당장 써봐야겠네요 ~ 감사합니다
  5. 코딩의 숨소리
    펜슬처럼 fluid.ui 도 많이 쓰이나요?
  6. 쟌이
    위에 이고잉님이 링크해 놓으신

    생활표현 모델링 수업(http://www.opentutorials.org......416)을

    듣고 따라하시면 될거 같네요.
    대화보기
    • 오의현
      뭘컴퓨터에깔면요위에것즐실행시키고연습가능하나요?
    • 구리
      저도 안 됐었는데 저장 버튼 누르고 나서 하면 되더라구요
      대화보기
      • 김원진
        안녕하세요.
        강의중에 이부분 안되요.
        <html>
        <body>
        <li>hhh</li>
        </body>
        </html>
        이렇게 치고 open with -> webbrower 하면 hhh가 뜨던데 저는 안떠여. 그다음에 나오는 글이 표현이 안되요

        왜그런가요?
      • storys
        Document -> Export As PNG 선택하셔서 PNG 그림파일로 보내주시면 될것 같은데요.
        혹 그쪽에서도 편집을 해야 한다면
        펜슬 프로그램과 오픈해서 보라고 메모와 같이 보내야 겠죠.
        아니면 ㅋㅋ -_-; 포샵으로 그림에 추가로 코멘트 해서 보내라 하던가,
        아니면 -_-;;;;;; PNG출력해서 손으로 적어서 팩스 하라고 하시던지,
        핸펀으로 찍어서 보내라 하던지....

        아 참 쓸데없는 답변인듯.....
        대화보기
        • 삼다도소년
          첫 출발은 그림을 그리는데 시작하는군요^^
        • 글리소
          안녕하세요~ 이고잉님! 강의 잘 보고 있습니다. ^__^
          하나 궁금한게 있는데요
          pencil프로그램에서 작업을 한 다음에
          파일을 원하는 폴더에 저장했습니다.
          그런데 다시 pencil프로그램과 연결해서
          파일을 열려고 하니 아무것도 없는 빈 창만 뜨더라구요ㅜㅜ
          그래서 pencil프로그램에 직접 들어가서 open 으로 여니까
          작업했던 파일이 뜨긴 하는데,,,, 그럼 다른 사람한테 작업했던 파일을
          보내서 그 사람이 확인할 때는 어떡해야 하나요 ㅜㅜ 어떤 프로그램으로
          연결해야지 바로 작업했던 ep파일을 열어볼 수 있나요 ㅠ
        • egoing
          테스트는 못 해봤습니다.
          대화보기
          • Tommy Lee
            혹시 pencil이 os x 매버릭스에서는 충돌이 발생하나요? 실행이 안되네요..
          • newkorn
            좋은 강의 감사합니다^^
          • Taries
            종이와 연필이 최고죠! :)
            1인 기획/개발로서는 아이패드와 스타일러스펜이 가장 편하더라고요.

            강의 정말 감사히 보고 듣고 실습하고 있습니다!
          • waneeyo
            잘봤습니다 선생님^^
          • 엠제이
            '프로그래밍은 지루하고 반복적인" 이 표현.. 음..
            생활코딩의 취지와 맞는건가요? ㅎㅎ;

            물론 문장이 위치한 컨텍스트에서 이해해야 하지만요..

            제 생각은,,
            중복이 난무한 개념없는 프로그래밍은 지루하고 노가다입니다.
            하지만 장인정신으로 한땀 한땀 진행하는 프로그래밍은 예술이고 창작입니다. ^^
          • 후니요
            강의 정말 잘보고있습니다. 고맙습니다.
          • ㄹㅇㅎㅇㄹ
            good good!!
          • 대인배새우
            good!
          • 전민정
            감사합니다
          • 좀비의부활
            완전 땡큐입니다!
          • David Jung
            짱짱이에요 !
          • sanai4287@naver.com
            감사합니다.~
          • Wonsik Lee
            멋집니다
          • 보문 정
            셈스토이 다녀 갑니다
          • 생또생
            실습결과
            Pencil로 실습한 결과를 네이버카페에 올렸습니다.
          • 생또생
            저도 위 예제 도전!!!
          • cc
          • 쌈닭
            목업툴 쓰고있는데...
            펜슬도 한번 사용해 봐야겠네요...
            감사합니다..^^
          • KaeSoon
            쉬프트 + 엔터
            대화보기
            • 김성훈
              이렇게 좋은 자료 공유해주셔서 진심으로 감사드립니다. pencil연습중인데 text에서 2줄이상 글을 쓰려면 어떻게 해야합니까?
            • 갈매나무
              연결된 pencil 동영상 봤는데 위젯이란 단어를 몰라 사전 검색. 중간중간 개념 공부까지 해야하는 벅찬 학습자입니다;;; 갈 길이 머네요
            • Rags
              모델링 링크 눌러서 갔다가 모델링 재미나서 다 보고 돌아왔다능...
            • jsk9390
              이제 시작하는 유저인데.. 와.. 눙물날거 같애요!!!완존 강의 짱짱
            • egoing
              아래 링크를 참조해주세요.http://www.opentutorials.org/c...
              대화보기
              • sunfanta
                (pencil은 파일연결이 잘 안된다. 다시 말해서 이 파일을 더블클릭해서 열지 말고, pencil내의 open 명령을 이용해서 파일을 직접 열자)
                는 것은 pencil 프로그램(??)을 받고 그 옆에 파란색 밑줄글씨 pencil 모델링 파일 을 그 소프트웨어 안에서 열으라는 뜻인가요?? 프로그램은 어디서 받아요???
              • 들뜬상태
                모델링 두번째단락 첫줄 오타요^^'와이어 프래임'이라도 (?)
              • manorgass
                Shift + Enter 입력 하시면 됩니다.
                대화보기
                • 이선화
                  글상자에서 줄바꿈 하려고 엔터치면 자꾸 상자선택으로 나가버려서 어떻게 해야하나 고민하다 사용법 동영상을 찾아봤습니다. 메모장에다 쓰고 붙혀넣기 하시는군요 ㅎㅎ 자체적으로 글상자 내에서 줄바꿈하는 방법은 아직 제보된 바가 없나요??
                • egoing
                  예 좋은 도구입니다. 약간의 버그쯤은 뛰어넘을 만큼요~
                  대화보기
                  • egoing
                    http://www.opentutorials.org/c... 여기 보시면 pencil에 대한 수업이 있습니다. 그리고 파일은 pencil에서 open명령을 이용해서 열어줘야 합니다. 파일을 더블클릭해서 열면 안되고요..
                    대화보기
                    • 김경환
                      ep 파일은 뭐로 열어요?;; pencil 확장자가 ep 네요
                    • kwangho
                      Pencil을 사용해서 동일하게 그려보았습니다. 약간의 버그는 있지만, 상당히 손쉽게 모델링 할 수 있는 툴 같네요.^^
                    • egoing
                      댓글에 롤오버를 하시면 관리라는 항목이 나타나는데 그걸 통해서 삭제 가능합니다. :)
                      대화보기
                      • 에이프릴
                        아! google drive가 링크가 있군요. 열어보고 이해했습니다. 근데, 이고잉님, 링크가 있다는 것을 발견한 후 제가 이전에 쓴 글을 지우고싶은데 지우는 지울수가 없네요. 방법이 있는데 제가 삭제 버튼을 못찾은건가요?
                        대화보기
                        • 에이프릴
                          구글 드라이브는 드랍박스와 같은 건가요?
                        버전 관리
                        egoing@gmail.com
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기