플로우 차트 (FC : Flow Chart) 플로우 차트(Flow Chart)란 웹사이트를 접속하여 어떠한 플로우를 거쳐서 네비게이션하는가를 나타내는 것입니다. 그리고 전체적인 사이트의 흐름도를 도식적으로 표현한 설계기법중의 하나입니다.   개발자들이 자신의 개발 스타일이 천차만별이지만 소프트웨어 공학(윽~ 이렇게 어려운 학문이 내입에서 나오다니..) 이라는 학문이 있어 어느정도 기본은 지키면서 합니다. 많은 개발자들은 이걸 따르고 준수하면서 보다 더 좋은 프로그램을 짭니다. 얘기가 이상한데로 흘렸네여~..지송…꾸벅.. 소프트웨어 공학을 공부하다보면 개발하기전에 설계가 필요하죠? DB 설계일수도 있고 프로그램 로직설계일수도 있습니다. 설계하면서 로직을 표현해야하는데, 이때 DFD로 하거나 Flow Chart를 설계을 하게 됩니다.(물론 다른 것도 있지만) 개발자는 이걸보면서 전체의 로직을 이해하고 프로그램을 바로 할수 있는 것입니다. 한마디로 설계자들이 해놓은 것을 개발자들이 그걸보고 개발을 하는겁니다. 그것이 바로 웹에서도 적용이 됩니다. 기획자는 기획을 하고 디자이너와 개발자들은 설계자료를 보고 개발을 하는것입니다. 물론 그 자료가 나오기까지는 서로 할키고 싸우고 그러지요. 크크크. 전 항상 이기는쪽이 제 편입니다요… 어찌보면 Web Site 하나를 구축하는것도 전체의 커다란 프로그램을 완성하는 것과 같은 의미를 지닙니다. 플로우차트는 스토리보드를 제작하는데 가장중요한 작업지침서입니다. 여러분들은 지금보시는 있는 Power Point란 프로그램을 생각해봅시다.(어라~ 이글읽으면서 조는사람이 있군..) 위에 주메뉴가 있고 그 밑에 툴바가 있고 각종 편리한 기능들이 있습니당. 그리고 밑에 도형을 그릴수있는 것이 있고 그리고 그밖에 숨어있는 기능이 참 많습니다. 이건 어떻게 설계 되었을까? 생각해봅시다. 처음에 전체의 뼈대를 잡고 각각의 로직설계가 들어갑니다. Web site 구축시에 전체의 뼈대를 잡고 각각의 메뉴마다 설계가 들어가듯이(Flow Chart) 그리고 난 다음에 각각의 화면에 대한 레이아웃을 설계합니다. Web site 에서 스토리보드를 설계하는것과 같은겁니다. 이정도면 플로우챠트와 스토리보드간의 연관관계를 조금은 이해했을겁니다. 한마디로 로미오와 줄리엣의 관계라고 보시면 됩니당.. 초기 기획안에서는 이 작업이 상당히 중요합니다. 그러므로 개발에 참여하는 모든 제작진은 기본으로 플로우차트를 이해하고 작성하는 법을 알고 있어야 하고 작성자는 표준에 따라 작성하여 누구라도 이해할 수 있도록 해야 합니당, 이때 한명이라도 이해못하면 안됩니다. 꼭 지켜주세용~~~..가끔가다가 저같은 멍청한사람이 있기도해서 프로젝트일정이 늦어질수도 있슴당. 크크크 아래의 표는 일반적인 기능성 플로우차트의 표현 요소들을 나타냅니당. 기능 명시 기능상의 내용에 대한 설명 분기 선택 기능상의 연결관계 표시

스토리보드 (StoryBoard) 다음 표(1-1) 는 회원관리 플로우차트의 실제 예입니다. 메인 Page 영화 회원 로그인 #Move-100 #Login-001 #Reg-001 로긴안함 영화 회원 로그인 회원등록 실패 실패 로그인 실패 등록실패 #Move-110 #Login-002 #Reg-003 액션 로그인 성공 성공 #Move-120 #Login-003 #Reg-002 코믹 #Reg-004 #Move-130 등록안내 무협 위의 예처럼 플로우차트는 가능한 상세하게 도식화시켜야 합니다. 각 주제마다 다른 컬러로 구분이 가도록 하는 것이 좋습니당. 각 프레임(페이지)마다 번호(코드부여규칙)를 주어 스토리보드와 매칭할 수 있도록 합니다. 코드부여규칙은 자신이 가장 알아보기 쉽게 하세용. 플로우차트는 프로그램의 기능구현요소를 충분히 반영, 프로그램 계획서를 대신 할 수도 있습니다. 작성된 플로우차트의 개수와, 다음의 스토리보드 장수는 일치할것을 권장합니당. 스토리보드 (StoryBoard) 웹기획에 있어서 가장 중요하다고 해도 과언이 아닐 정도로 사이트 개발의 설계도이며 구체적인 작업 지침서입니당. 스토리보드 작성시, 기획자는 스토리보드에 필요한 화면 레이아웃 및 화면구성안 설명을 준비한 후 디자이너와 회의를 통해 스토리보드를 완성합니당.개발자도 참석해도 무방하지만 굳이 참석을 안해도 됩니당. 스토리보드가 완성된다는 것은 기획단계가 완료되었음을 의미하며, 디자이너는 스토리보드에 명시된 내용을 가지고 화면 디자인부터 시작하여 각각의 일러스트 데이터를 그려 리뷰를 준비합니다. 프로그래머는 스토리보드를 보고 프로그램을 설계하고 각 세부로직을 코딩하게 됩니다. 따라서 스토리보드가 완성되면 사이트 개발 기획이 거의 완성되었다고 말할 수 있으며 다음작업은 구체적인 제작만이 남게 됩니다. 잘못된 설계도를 가지고 작업하면 잘못된 개념의 집을 짓게 되어 기초가 무너지게 되는 것처럼 스토리보드는 정확하고 치밀하게 작성되어야 합니다. 스토리보드의 장수와 완성된 웹사이트의 홈페이지 개수는 일치하여야 합니다.

- 다음 표는 스토리보드의 구성예입니당. 1.페이지주제 2.페이지ID 3.화면구성 4.화면설명 5.Flow Chart & 로직 6.Text 7.Graphic/Video 1. 페이지 주제: 해당 화면의 주제를 명시 2. 페이지 ID : 화면의 코드명. 플로우차트상의 코드번호와 일치해야 함. 3. 화면구성 : 화면의 내용과 구성을 이해하기 쉽도록 표현함. 메뉴 네비게이션의 구성과 위치, 이미지,아 이콘, 텍스트등의 화면 구성요소를 가능한 정확히 묘사해야함. 4. 화면설명 : 화면구성에서 표현을 못한 부분과 화면 분위기 및 요구사항을 글로 설명하는 부분임. 디자인이나 프로그램에게 특별히 주의시켜야할 부분이나 꼭 해야할 부분이 있을 경우에 설명 함. 특별히 강조되야할 화면 부분에 대해서도 설명한다. 고급기술이 들어가는 부분또한 설명 함. 5. F/C와 Logic : 화면의 흐름을 표시하고 Logic 적인 부분을 설명함 6. Text: 화면 나타나는 텍스트 내용을 적는 곳. 이 란에 다들어갈 수 없으면 별도의 용지를 첨부함. 텍스트는 짧고 간결하여 가독성이 높은 문장으로 적음. 7. Graphic/Video : 그래픽 데이터와 Video 를 표현하는 곳. 지정된 기업의 로고, 캐릭터등이 있다면 반드시 명시하고 기타 강조할 만한 그래픽요소와 비디오 요소가 들어간다면 이의 자세한 설명을 덧붙 임.

명확하게 header와 footer 로 구성해서 아래위의 균형을 맟추어 단정하게 구성 스토리보드는 상황에 따라 Format이 변할수 있습니당. 프로젝트의 내용과 기능에 따라 적절하게 선택을 해야합니당. 스토리보드의 각각의 구성요소는 필요에 따라 첨삭이 가능하나, 기본틀은 유지하도록 한다. 즉, 화면 구성과 화면 설명, 텍스트와 그래픽 란은 변경하지 않습니당. 한마디로 기본틀은 벗어나지 말라는 야그입니당. 예를 한번 들어보까용? 1.페이지주제 회원가입화면 2.페이지ID #Reg-001 Brusjung ‘s HomePage Logo 4.화면설명 - 전체적으로 심플 깔끔하게 구성 확인 버튼 이미지로 구성 명확하게 header와 footer 로 구성해서 아래위의 균형을 맟추어 단정하게 구성 저는누구 구현기술 관련포럼 얘기방 질답란 링크모음 회원가입 아이디 비밀번호 확인사살 이메일 성명 주민버호 홈페이지 가입동기 Text 삽입 확인 CopyLeft(c), 2001 brusjung 5.Flow Chart & 로직 6.Text 7.Graphic/Video #formReg-001 첨부파일 위의 표 1-1 참조 사이트를 가입해 주셔서 성은이 백골난망입니당. 최상의 서비스로 모시겟습니당 - Logo 부분 디자인 - Header, footer 을 이미지로 제작 이것으로 저의 플로우챠드와 스토리 보드와의 관계를 마치겟습니다. 제대로 된 자료인지는 잘 모르겠습니다. 저 또한 시간을 쪼개서 만든 자료라 그렇게 좋은 자료같지는 않지만 이제 막 시작하는 이들에게 조금이나마 도움이 될것이라고 믿고 이만 줄이겠습니다.