플로우 차트 (FC : Flow Chart)

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

기능 명시

기능상의 내용에 대한 설명

분기 선택

기능상의 연결관계 표시

다음 표 (1-1) 는회원관리 플로우차트의 실제예입니다 .

메인 Page

영화

액션

코믹

무협

회원 로그인로긴안함

로그인 성공

로그인 실패

회원등록

성공

등록안내

등록실패실패 실패

위의 예처럼 플로우차트는 가능한 상세하게 도식화시켜야 합니다. 각 주제마다 다른 컬러로 구분이 가도록 하는 것이 좋습니당 . 각 프레임 (페이지 ) 마다 번호 (코드부여규칙 ) 를 주어 스토리보드와 매칭할 수 있도록 합니다 . 코드부여규칙은 자신이 가장 알아보기 쉽게 하세용 . 플로우차트는 프로그램의 기능구현요소를 충분히 반영 , 프로그램 계획서를 대신 할 수도 있습니다. 작성된 플로우차트의 개수와 , 다음의 스토리보드 장수는 일치할것을 권장합니당 .

스토리보드 (StoryBoard)

웹기획에 있어서 가장 중요하다고 해도 과언이 아닐 정도로 사이트 개발의 설계도이며 구체적인 작업 지침서입니당 . 스토리보드 작성시 , 기획자는 스토리보드에 필요한 화면 레이아웃 및 화면구성안 설명을 준비한 후 디자이너와 회의를 통해 스토리보드를 완성합니당 .개발자도 참석해도 무방하지만 굳이 참석을 안해도 됩니당 . 스토리보드가 완성된다는 것은 기획단계가 완료되었음을 의미하며 , 디자이너는 스토리보드에 명시된 내용을 가지고 화면 디자인부터 시작하여 각각의 일러스트 데이터를 그려 리뷰를 준비합니다 . 프로그래머는 스토리보드를 보고 프로그램을 설계하고 각 세부로직을 코딩하게 됩니다 .따라서 스토리보드가 완성되면 사이트 개발 기획이 거의 완성되었다고 말할 수 있으며 다음작업은 구체적인 제작만이 남게 됩니다 . 잘못된 설계도를 가지고 작업하면 잘못된 개념의 집을 짓게 되어 기초가 무너지게 되는 것처럼 스토리보드는 정확하고 치밀하게 작성되어야 합니다 . 스토리보드의 장수와 완성된 웹사이트의 홈페이지 개수는 일치하여야 합니다 .

#Move-100

#Move-110

#Move-120

#Move-130

#Login-001

#Login-002

#Login-003

#Reg-001

#Reg-002

#Reg-004

#Reg-003

1.페이지주제 2.페이지 ID

3. 화면구성 4. 화면설명

6.Text 7.Graphic/Video 5.Flow Chart & 로직

1. 페이지 주제 : 해당 화면의 주제를 명시2. 페이지 ID : 화면의 코드명 . 플로우차트상의 코드번호와 일치해야 함 . 3. 화면구성 : 화면의 내용과 구성을 이해하기 쉽도록 표현함 . 메뉴 네비게이션의 구성과 위치 , 이미지 ,

아 이콘 , 텍스트등의 화면 구성요소를 가능한 정확히 묘사해야함 . 4. 화면설명 : 화면구성에서 표현을 못한 부분과 화면 분위기 및 요구사항을 글로 설명하는 부분임 . 디자인이나 프로그램에게 특별히 주의시켜야할 부분이나 꼭 해야할 부분이 있을 경우에 설명 함 . 특별히 강조되야할 화면 부분에 대해서도 설명한다 . 고급기술이 들어가는 부분또한

설명 함 .5. F/C 와 Logic : 화면의 흐름을 표시하고 Logic 적인 부분을 설명함6. Text: 화면 나타나는 텍스트 내용을 적는 곳 . 이 란에 다들어갈 수 없으면 별도의 용지를 첨부함 . 텍스트는 짧고 간결하여 가독성이 높은 문장으로 적음 .7. Graphic/Video : 그래픽 데이터와 Video 를 표현하는 곳 . 지정된 기업의 로고 , 캐릭터등이 있다면 반드시 명시하고 기타 강조할 만한 그래픽요소와 비디오 요소가 들어간다면 이의 자세한 설명을 덧붙 임 .

- 다음 표는 스토리보드의 구성예입니당 .

스토리보드는 상황에 따라 Format 이 변할수 있습니당 . 프로젝트의 내용과 기능에 따라 적절하게 선택을 해야합니당 . 스토리보드의 각각의 구성요소는 필요에 따라 첨삭이 가능하나 , 기본틀은 유지하도록 한다 . 즉 , 화면 구성과 화면 설명 , 텍스트와 그래픽 란은 변경하지 않습니당 . 한마디로 기본틀은 벗어나지 말라는 야그입니당 .예를 한번 들어보까용 ?

1.페이지주제 회원가입화면 2.페이지 ID #Reg-001

4. 화면설명- 전체적으로 심플 깔끔하게 구성- 확인 버튼 이미지로 구성- 명확하게 header 와 footer 로 구성해서 아래위의 균형을 맟추어 단정하게 구성

6.Text 7.Graphic/Video 5.Flow Chart & 로직

Brusjung ‘s HomePage저는누구 구현기술 관련포럼 얘기방 질답란 링크모음 회원가입

CopyLeft(c), 2001 brusjungbrusjung

아이디비밀번호확인사살이메일성명주민버호

홈페이지가입동기

확인

#formReg-001 첨부파일위의 표 1-1 참조

Logo

- Logo 부분 디자인- Header, footer 을 이미지로 제작

사이트를 가입해 주셔서 성은이 백골난망입니당 .최상의 서비스로 모시겟습니당

Text 삽입

이것으로 저의 플로우챠드와 스토리 보드와의 관계를 마치겟습니다 . 제대로 된 자료인지는 잘 모르겠습니다 . 저 또한 시간을 쪼개서 만든 자료라 그렇게 좋은자료같지는 않지만 이제 막 시작하는 이들에게 조금이나마 도움이 될것이라고 믿고이만 줄이겠습니다 .