26
웹 웹웹 웹 웹웹

웹사이트기획 및 관리

  • Upload
    -

  • View
    1.137

  • Download
    2

Embed Size (px)

DESCRIPTION

웹 서비스가 구현되는 과정을 클라이언트와 서버의 역할을 보여주며 자세히 서술~ 웹 기획 곤리하는 실무자들 참고. 출처는 알 수가 없었네요~

Citation preview

Page 1: 웹사이트기획 및 관리

웹 기획 및 관리

Page 2: 웹사이트기획 및 관리

웹사이트 기획의 실무

웹사이트 개발개념

o 프로그래밍 개념

Server ProgrammingServer Programming Client ProgrammingClient Programming

• 개념 : 서버로 부터 응답된데이터를 Client(Web Browser)에서 해석 (Parsing)

• 특징 : 소스보안취약 , 브라우저 종류 및 버전에 따라 표준이 틀림

• 종류 : Javascript, Flash Action Script 등

• 예시 : Rollover 이미지 등

• 개념 : 서버로 부터 응답된데이터를 Client(Web Browser)에서 해석 (Parsing)

• 특징 : 소스보안취약 , 브라우저 종류 및 버전에 따라 표준이 틀림

• 종류 : Javascript, Flash Action Script 등

• 예시 : Rollover 이미지 등

요구 (Request)

응답 (Response)

• 개념 : 사용자가 요구한 데이터를 서버에서 해석(Parsing) 하여 결과물을 Client 에게 전송

• 특징 : 데이타베이스 연동가능 (ODBC), 소스보안

• 종류 : JSP, ASP, PHP

• 예시 : 게시판 , 회원가입

• 개념 : 사용자가 요구한 데이터를 서버에서 해석(Parsing) 하여 결과물을 Client 에게 전송

• 특징 : 데이타베이스 연동가능 (ODBC), 소스보안

• 종류 : JSP, ASP, PHP

• 예시 : 게시판 , 회원가입

Server Client

Page 3: 웹사이트기획 및 관리

웹사이트 기획의 실무

웹사이트 개발개념 (설명 )

위 내용은 서버와 클라이언트의 관계에서 해석 (Parsing) 을 어디서 하는가에 따른 개념을 설명하고 있습니다 .

데이터 전송은 Client( 웹브라이저 )에서 데이터를 요구 (Request) 하면 서버에서는 해당되는 내용을 응답 (Response) 하는

과정을 거칩니다 .

이때 , 응답하여 보내어지는 데이터가 서버에서 이미 해석을 해서 웹브라우저에서 보여줄 수 있는 방식과 , 해석되지 않은

데이터를 웹브라우져에서 해석하여 여러분에게 보여주는 방식 두가지로 구분됩니다 .

서버에서 먼저 해석하여 클라이언트에서 이미 해석된 결과를 보여 줄 수 있도록 작성하는 것을 서버 프로그래밍이라고 하며 ,

일단 데이터를 전송한 후 Client( 웹브라우저 )에서 이를 해석하여 사용자에게 보여주기 위해 작성하는 것을 클라이언트 프로그래밍

이라고 합니다 .

서버프로그래밍은 ASP,PHP,JSP 등이 있으며 , 데이타베이스와 연동이 가능하며 , 소스가 보안이 되지요 . 물론 보안이라는 것은

완벽한 것은 없겠지만 , 클라이언트에게 소스가 노출 되지 않습니다 . 이유는 서버에서 이미 해석한 결과물을 클라이언트에서

전송했기 때문이죠 . 가장 큰 매력은 서버 프로그래밍은 데이터베이스와 연동이 가능하다는 점입니다 .

클라이언트 프로그래밍은 여러분들이 잘 아시는 HTML, CSS, JAVASCRIPT 를 뜻합니다 . 서버에서는 작성된 HTML 문서에 있는

내용을 서버에서 해석하지 않고 , 클라이언트의 웹브라우저에서 해석합니다 . 하지만 작성된 언어가 웹브라우저의 버전이나

종류에 따라 지원이 불가능 할 수 있고 , 소스가 그대로 노출 된다는 단점이 있습니다 . 장점으로는 클라이언트에서 바로

해석되기 때문에 속도가 빠르지요 . 주로 웹브라우저를 제어하거나 , 마우스를 올리면 이미지가 바뀌는 롤오버 이미지 , 회원가입시

정해진 양식에 데이터를 입력하지 않았을 때 경고메세지를 띄우는 등 간단한 처리에 많이 사용합니다 .

Page 4: 웹사이트기획 및 관리

웹사이트 기획의 실무

데이타베이스 개념

개념 : 데이터 입력 (Insert)Client 가 게시물을 작성

사용자가 입력한 데이타를 DataBase 에 저장

개념 : 데이터 검색 (Select)DataBase 에서 데이터를 꺼내와서 레코드단위별로(RecordSet) 데이터를 표 형태로 보여줌

개념 : 데이터 수정 (Update)기존에 있던 데이터를 다른 데이터로 변경

게시물을 삭제하였습니다 .

개념 : 데이터 삭제 (Delete)데이타베이스에 있는 데이터를삭제함

Page 5: 웹사이트기획 및 관리

웹사이트 기획의 실무

데이타베이스 개념 ( 설명 )

개발을 하기 위해서는 데이타베이스의 개념을 빠트릴 수 가 없습니다 .

사용자가 가입했을 때 입력한 데이터 , 게시판작성 등 모든 데이터를 데이타베이스에 저장하고 , 또 그것을 사용자에게 뿌려주기

때문이죠 .

물론 이런 데이터를 간단한 파일에 저장도 가능합니다 . 하지만 , 관계형 데이타베이스 관리 시스템 (Relational DataBase Management

System:RDBMS) 의 장점을 최대한 살려야 겠지요 .

데이타베이스는 간단히 설명하여 각종 데이터를 저장하기 위한 장소입니다 . 종류로는 MS-SQL, ORACLE, mySQL, ACCESS 등이 많이

사용됩니다 .

데이타베이스안에는 여러 개의 Table 이 집합되어 있고 , Table 은 열 (Column or Field) 과 행 (Row or Record) 의 구조로 되어 있습니다 .

이해가 안가시면 엑셀 (EXCEL) 을 생각하시면 됩니다 .

사용자가 회원가입 등을 하여 데이터를 입력하게 되면 이들 데이타들은 모두 알맞은 열과 행에 입력이 되지요 . 이것은 데이타베이스

개념으로 Insert 라고 합니다 . 그리고 그 입력된 데이타베이스를 화면에 뿌려줍니다 . 이것을 검색 (Select) 이라고 하고요 . 그런데 ,

검색을 할 때는 조건 등을 사용할 수 있습니다 . 회원아이디와 이름의 행만 출력할 수 있고 , 사용자 아이디가 ‘ I’ 로 시작되는 것만

검색하여 화면에 뿌려줄 수 도 있습니다 . 또 , 데이타 정렬방법도 설정할 수 있구요 .

게시판 같은 경우는 데이터를 뿌려 줄때 레코드단위 보여줍니다 . 데이터를 검색 (Select) 한 후 이것을 Record 화 시켜서 한줄 한줄씩

보여주게 됩니다 . 그리고 , 사용자 입력한 데이터를 수정 (Update) 도 가능하고 , 삭제 (Delete) 도 가능합니다 . 모두 이러한 명령어들은

많은 조건을 사용 할 수 있습니다 .

Select, Update, Delect, Insert 의 4가지 명령어를 데이타베이스에서는 DDL(Database Definition Language) 또는 쿼리 (Query) 문

라고 합니다

Page 6: 웹사이트기획 및 관리

웹사이트 기획의 실무

웹사이트 개발 기획 프로세스

• 스토리보드 기획• DB 정책 기획• 페이지별 DFD 기획

• 스토리보드 기획• DB 정책 기획• 페이지별 DFD 기획

기획

• 로직 타당성 검토 및 협의• 개발 역량 타당성 검토 및 협의• 일정 협의

• 로직 타당성 검토 및 협의• 개발 역량 타당성 검토 및 협의• 일정 협의

개발 회의

• 데이타베이스 정규화 • 데이타베이스 설계 (ERD)• 코딩• 알파 /베타 테스트• 런칭

• 데이타베이스 정규화 • 데이타베이스 설계 (ERD)• 코딩• 알파 /베타 테스트• 런칭

개발

웹사이트 개발 기획 프로세스 (설명 )

웹을 개발을 하기 위한 프로세스는 기획 -> 개발회의 -> 개발의 프로세스를 거칩니다 .웹기획자가 스토리보드와 DB 정책 , 페이지별DFD 를 기획하는데 스토리보드는 디자이너와 개발자 위해 만드는 것이고 , DB 정책은 데이타베이스를 설계 (ERD) 하기 위해 만듭니다 .그리고 , 페이지별 DFD(Data Flow Diagram) 은 개발자가 페이지 흐름의 로직을 이해하기 위해 만듭니다

이렇게 만들어진 기획서는 개발자와 함께 타당성을 검토 및 협의를 하게 됩니다 . 개발자가 일정안에 구현 가능한 여부를 협의하게되는 것이지요 .

그 다음 개발자는 데이타베이스를 정규화하게 됩니다 . 데이터베이스를 정규화하고 설계하는 것은 스키마라고 표현합니다 . 더 자세하게는 설명을 하면 데이터베이스 책한권을 써야 될것 같아서요 . 관심있으신 분은 데이타베이스 책을 사서 더 깊숙하게 공부해보세요 .

그 후 프로그래밍 작업을 거처 알파 /베타테스트와 런칭을 하게 되는 것이죠 .

Page 7: 웹사이트기획 및 관리

I. DB 정책

웹사이트 기획의 실무

Page 8: 웹사이트기획 및 관리

웹사이트 기획의 실무

DB 정책 기획

Column Null 허용

기본값 비고

회원 ID N

Password N

이름 N

주민번호 N

주소 N

전화번호 Y

회원 E-MAIL N

직종 N 웹기획 웹기획 , 행정 , 마케팅

가입일 N

방문횟수 N

회원가입 DB TABLE

Column Null 허용 기본값 비고

IDENTITY N

회원 ID N 회원 DB

회원 E-MAIL N 회원 DB

글제목 N

조회수 N

REF N

REF_STEP N

REF_LEVEL N

글내용 N …

게시판 TABLE (답변형 , 첨부파일 없음 )

회원가입과 게시판 1개와 자료실 1개 형태의 경우 예시

비회원 읽기 쓰기

회원 (Session) O X

비회원 O X

게시판 Database

Permission 설정

Page 9: 웹사이트기획 및 관리

웹사이트 기획의 실무

Column Null 허용 기본값 비고

IDENTITY N

회원 ID N 회원 DB

회원 E-MAIL N 회원 DB

글제목 N

조회수 N

자료 설명 N

자료 올린날짜 N

다운로드 횟수 N

자료 위치 Y

파일 이름 Y

파일 용량 Y …

자료실

비회원 읽기 /다운로드 쓰기 /업로드

회원 (Session) O O

비회원 X X

자료실 Database

Permission 설정

Page 10: 웹사이트기획 및 관리

웹사이트 기획의 실무

참고 : ERD(Entity Realatonship Diagram)

Page 11: 웹사이트기획 및 관리

웹사이트 기획의 실무

DB 정책 기획 (설명 )

개발자가 DB 를 설계하기 위해서는 데이타베이스에 정확한 데이터를 웹기획자가 작성을 해야 합니다 . 기획자의 이런 자료를 바탕으로

개발자들이 ERD(Entity Realatonship Diagram) 를 작성합니다 .

사이트가 회원가입과 로그인 그리고 , 게시판 , 자료실로 구성되어 있을 경우에는 회원가입 DB, 게시판 DB, 자료실 DB 에 들어갈

각종 칼럼 (Column) 을 명확하게 알려줘야 되겠지요 .

여기서 Null 허용이라는 것은 아무것도 입력하지 않아도 가능하다는 의미 입니다 . 회원가입할때 전화번호를 입력하지 않아도

가입이 된다는 것이겠지요 .

기본값 이라는 것은 아무것도 입력하지 않았을때 기본으로 들어가게 되는 값을 의미합니다 . 게시판은 답변형 게시판인지 첨부파일이

가능한지를 명시 해야 합니다 . 이유는 답변형 게시판인가 첨부파일이 가능한지 여부에 따라서 DB 구조 및 코딩이 달라질 수 있기

때문이죠 . 이것을 적지 않고 게시판을 다 만든 후 첨부파일을 넣어 달라고 개발자에게 의뢰한다면 개발자가 무척 화를 낼 것입니다 .

게시판 비고란에 회원 ID 와 회원 E-MAIL 이 있는데 이것은 사용자가 가입할 때 입력이 완료된 것이기 때문에 로그인 후 게시판 작성할

때는 다시 작성할 필요가 없겠지요 . 이 개념을 회원가입 Table 과 게사판 Table 을 ‘조인 (Join)’을 한다고 합니다 .

퍼미션은 권한을 뜻합니다 . 비회원일 경우 게시물을 읽기가 가능한지 쓰기가 가능한지 여부를 설정하는 것입니다 . 이보다 더 복잡한

경우를 예로 든다면 사이트 안에 여러 개의 클럽이 있고 , 클럽 안에 비회원 , 일반회원 , 정회원 , 운영자 등이 있을 경우에는 권한

설정이 매우 복잡하게 됩니다 . 이러한 권한을 효과적으로 작성해야 개발자가 완벽하게 프로그래밍하겠지요 ?

세션 이라는 것은 사용자가 로그인 한 상태를 말합니다 . 보통 세션은 20분이 Defualt 로 설정되어 있는데 변경 가능합니다 .

사용자가 아무 요구 (Request) 가 없게 되면 자동으로 세션이 끊기게 됩니다 . 또한 Log Out 버튼을 눌르게 되면 세션이 끊기게

되지요 . 이 세션이 On 상태가 되면 그때 부터 회원가입시 사용자가 입력한 DB 를 컨스톨 가능하게 됩니다 .

Page 12: 웹사이트기획 및 관리

II. DFD(Data Flow Diagram) 기획

웹사이트 기획의 실무

Page 13: 웹사이트기획 및 관리

회원 가입 DFD

아이디 /비밀번호체크

Page-Key : index메인페이지

Page-Key : Cp1컨텐츠

Page-Key : board게시판 1

Page-Key : pds자료실 2

Page-Key : login회원로그인

Page-Key : login_ok회원로그인 성공

Session = no

Session = Yes

클릭했던 컨텐츠Return

Page-Key : login_fail로긴실패 페이지

no

Yes

Page-Key : login_ok회원성공 페이지

웹사이트 기획의 실무

Page-Key : join회원가입

Page-Key : join_insert회원등록 페이지

Page-Key : login_ok회원가입성공

데이터입력타당성 검토

no

yes회원 tableinsert

Post

Post

Page 14: 웹사이트기획 및 관리

회원 가입 DFD (설명 )

웹사이트 기획의 실무

DFD 는 페이지의 흐름을 로직화 한것입니다 . Page Key 라는 제가 임의로 설정한 것인데 , 스토리보드안의 각각 페이지마다

Page Key 라는 것을 이름을 중복시키지 않게 적어놓고 , 이것은 DFD 에서 각 페이지이름을 Page Key 로 두게되면 페이지 개수가

많아져도 개발 할 때 이 Page Key 로 페이지접근을 쉽게 할 수 있습니다 . Page Key 는 누구나 알 수 있는 이름으로 짓는 것도 좋고 ,

파일명으로 사용해도 좋습니다 .

DFD 를 그리기 위해서는 시작과 끝을 명시하고 , 페이지 흐름이 조건에 따라 달라질 경우에는 정확하게 명시해 줘야

합니다 . 또 , DB 를 핸들링 할 경우도 명시를 해줘야 하구요 . 위는 회원가입 DFD 를 그린 것이고 , 게시판 등도 정확하게

작성해주면 좋습니다 . 일정이 시급한 경우에는 플로우 차트가 생략하는 경우가 있는데 이것은 옳지 못한 방법입니다 .

웹에이전시 업체의 웹기획자라면 기존에 작성된 플로우 차트를 라이브러리로 지니고 있고 , 새로운 프로젝트가 있을 때 똑같은

플로우 차트를 조금씩 수정하면서 사용하면 됩니다 . 개발자에게 이러한 플로우차트를 제시하지 않게 되면 나중에 엉뚱하게 만들고

나서 웹기획자에게 책임을 전가해도 웹기획자는 할말이 없게 됩니다 . 오해할 소지가 있을 지 모르겠지만 책임을 회피하기

위해 만든다는 의미가 아니라 가장 빠르고 효율적인 프로젝트를 위해서는 플로우 차트를 정확하게 작성해야 힘 빠지는

재작업을 최소화 할 수 있습니다 . 훌륭한 웹기획자라면 가장 복잡한 게시판 같은 경우도 자기만의 DFD 및 스토리보드를

미리 작성해 놓고 프로젝트시 언제든지 개발자에게 명시할 수 있어야 하며 , 그것을 자신만의 것으로 계속적으로 업그레이드를

할 수 있어야 합니다 . .

Page 15: 웹사이트기획 및 관리

게시판 DFD

Page-Key : List게시판 리스트

웹사이트 기획의 실무

Page-Key : Content게시물 내용

Get

Page-Key : Write게시물 쓰기 /답장

Page-Key : Edit게시물 수정

Page-Key : Edit게시물 삭제

게시판 tableInsert/update

게시판 tableUpdate

게시판 tabledelete

Get

Get

Get

삭제클릭

쓰기 or 답장 클릭

게시물 클릭

쓰기 클릭

수정 클릭

삭제클릭

Page 16: 웹사이트기획 및 관리

게시판 DFD 설명

웹사이트 기획의 실무

위는 게시판 DFD 입니다 . 다르게 말한다면 , 게시판에 있는 모든 네비게이션 흐름도라고도 설명할 수 있겠지요 .

프로젝트가 진행될 때 위의 흐름도의 역할은 매우 중요합니다 . 전체적으로 페이지 로직에 따른 흐름을 이해 할 수 있기 때문입니다 .

물론 , 게시판은 매우 정형화 된 것이기 때문에 이러한 흐름도를 그리지 않아도 프로그래머가 쉽게 제작할 수 있습니다 .

하지만 , 전혀 새로운 방식의 프로젝트를 진행한다면 , 위와 같은 DFD 가 없으면 프로그래머는 프로젝트를 진행하는데 많은

에러사항이 있게 됩니다 .

GET 과 POST 는 데이터를 전송하는 방식을 말합니다 .

간단하게 설명하여 , GET 방식은 URL 주소에 데이타값을 다음페이지로 넘겨주는 방식입니다 . POST 방식은 HTTP헤더 안에 데이터를

넣어서 보냅니다 .

차이점이라면 GET 방식은 URL 주소로 넘겨주는 값이 보이기 때문에 , 로그인을 GET 방식으로 한다면 아이디와 패스워드가 URL 주소에

보여지겠지요 .

POST 방식은 HTTP헤더안에 데이터를 넣어서 보내지기 때문에 사용자는 페이지에서 페이지를 넘어갈 때 무슨 값이 넘어갔는지 알

수 없습니다 .

그래서 , 보통 GET 방식은 URL 주소로 컨텐츠를 접근하고자 할 때 쓰입니다 . 주로 게시판의 게시물 , 뉴스레터의 컨텐츠 , 쇼핑몰의

상품목록 등에 많이 쓰구요 .

POST 방식은 로그인이나 회원가입 등에 쓰입니다 .

Page 17: 웹사이트기획 및 관리

III. 스토리보드

웹사이트 기획의 실무

Page 18: 웹사이트기획 및 관리

게시판 스토리보드

웹사이트 기획의 실무

번호 작성자 제 목 작성일 조회수

<번호>

②<작성자>

① <게시판 제목 > <YYYY-MM-DD> <조회수 >

답변했을 경우

최근 하루 게시물

제목작성자내용

◀  [ 1 2 3 4 ] ▶

① GET 방식 CONTENT 로 링크 ② 작성자 E-MAIL 링크 ③ 최대 10, 이상일 경우 , ◀ ▶ 활성화

④ 작성일 내림차순 정렬 ⑤ 답변형 이미지 ⑥ 최근 게시물 (24시간으로 설정 )

⑦ ⑧ ⑨

PAGE KEY LIST TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION

ON (ID) PROGRAM ASP, JS

네비게이션 & 설명

NAVIGATION-PATH 홈 > 게시판

게시판

반복구간10 번반복

Page 19: 웹사이트기획 및 관리

게시판 스토리보드

웹사이트 기획의 실무

① WRITE 로 링크 ② LIST 로 링크 ③ 답변형 WRITE 로 링크

④ 수정형 WRITE 로 링크 ⑤ PASSWORD 로 링크 ⑥ 이전 레코드 (게시물 )로 이동

⑦ 다음 레코드 (게시물 )로 이동 ⑧ ⑨

PAGE KEY CONTENT TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION

ON (ID) PROGRAM ASP, JS

네비게이션 & 설명

NAVIGATION-PATH 홈 > 게시판 > 게시물 제목 클릭 (컨텐츠 )

제목 <게시판 제목 >

작성일 <YYYY-MM-DD> <번호 >번호 <조회수 >조회수

<내용 >

작성자 <작성자 >

게시판

① ② ③ ④< > ⑥⑦

Page 20: 웹사이트기획 및 관리

게시판 스토리보드

웹사이트 기획의 실무

① 입력된 데이터 submit (null 체크 ) ② 입력된 데이터를 지우고 작성자에 focus ③

④ ⑤ ⑥

⑦ ⑧ ⑨

PAGE KEY WRITE TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION ON (ID) PROGRAM ASP, JS

네비게이션 & 설명

NAVIGATION-PATH 홈 > 게시판 > 게시물 WRITE 클릭

게시판

글쓰기

작성자

E-MAIL

제 목

내 용

비밀번호

① ②

Page 21: 웹사이트기획 및 관리

게시판 스토리보드

웹사이트 기획의 실무

① 수정할 게시물 작성자 출력 ② 수정할 게시물 E-MAIL 출력 ③ 수정할 게시물 E-MAIL 출력

④ 수정할 게시물 내용 출력 (focus) ⑤ 비밀번호란은 공란 ⑥ 수정된 내용 submit (null 체크 )

⑦ 처음으로 refresh 되며 내용에 focus ⑧ 패스워드 확인 후 게시물 삭제 ⑨

PAGE KEY EDIT TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION ON (ID) PROGRAM ASP, JS

네비게이션 & 설명

NAVIGATION-PATH 홈 > 게시판 > 게시물 제목 클릭 > EDIT 클릭

게시판

글수정

작성자

E-MAIL

제 목

내 용

비밀번호

<작성자 >

<EMAIL>

<제목 >

<내용 >

<비밀번호 >

⑥ ⑦ ⑧

Page 22: 웹사이트기획 및 관리

게시판 스토리보드 (설명 )

웹사이트 기획의 실무

스토리보드라는 것은 디자이너와 개발자가 공통으로 이해할 수 있도록 만드는 것입니다 . 스토리보드는 정석은 없습니다 .

웹기획자 각자 나름대로의 방법을 가지고 작성하시면 됩니다 . 따라서 제 방법이 꼭 옳다는 것이 아니지요 .

저는 아까 말씀드렸듯이 각 페이지의 PAGE KEY 를 둬서 플로우 차트에서 접근 가능하도록 하였습니다 . 그리고 네비게이션 경로는

이 페이지를 어떻게 클릭하면 볼 수 있는가를 나타냅니다 .

Session On 이라는 것은 퍼미션을 이야기 한것인데 , 현재 이 페이지는 로그인한 상태에서만 볼 수 있다는 뜻입니다 . 권한이

복잡할 때는 각 페이지 마다 볼 수 있는 권한의 이름을 적으면 됩니다 . 예를들어 , 이 페이지는 무료회원이 볼 수 있다면 , F,

일반회원 동호회 회원이 볼수 있다면 FS, 이런 식으로 권한 표시를 하면 됩니다 . ID 는 해당 아이디로 볼 수 있는 페이지가

있다면 (예를들어 , 운영자 ID) 그 아이디를 적으면 됩니다 .

그리고 , 각각의 설명은 번호를 둬서 아래 부분에 설명을 두었습니다 . 이것은 제 방식 이구요 . 여러분들만의 방식으로 하셔도

상관없습니다 . 게시판 리스트의 반복에 대해서 설명을 드리겠습니다 . 프로그래밍상으로 ,

HTML 상으로는

<TR>

<TD>< 번호 ></TD><TD><작성자 ></TD><TD><게시판 제목 ></TD><TD><YYYY-MM-DD></TD><TD><조회수 ></TD>

</TR>

위 부분을 한 페이지가 끝날 때 또는 글이 없을 때 까지 10 번 반복하여 데이타베이스에 있는 내용을 화면에 나타내게 됩니다 .

따라서 어느 부분이 총 반복을 몇 번 하는 스토리보드상에 명시해줘야 합니다 .

<번호>

①<작성자>

② <게시판 제목 > <YYYY-MM-DD> <조회수 >

Page 23: 웹사이트기획 및 관리

게시판 스토리보드 (설명 )

웹사이트 기획의 실무

반복하는 방식은 표 (TABLE) 형태로 가능하며 여러가지 형태가 나올 수 있습니다 .

주의할 점은 반복하는 구간의 항목은 항상 같아야한다는 점입니다 .

세로 반복횟수명시

가로 반복횟수명시가로 반복횟수명시

세로 반복횟수명시

쇼핑몰 상품전시에 많이 쓰이는 방식

게시판에 많이 쓰이는 방식

Page 24: 웹사이트기획 및 관리

개념설명

웹사이트 기획의 실무

1. 데이타베이스에서 일정한 조건으로 검색 (select)

검색

Page 25: 웹사이트기획 및 관리

개념설명

웹사이트 기획의 실무

2.검색한 부분을 Record 단위로 저장

Record 단위로 각각을 저장

3. 웹브라우저에 Record 의 각 항목을 세로로 반복시켜 출력

title

pwd email num writeday

상위 부분을 출력

Page 26: 웹사이트기획 및 관리

마치면서

웹사이트 기획의 실무

의뢰자가 제안요청을 통하여 사이트를 의뢰하는 과정에서 대부분의 웹에이전시 업체들은 디자인적인 컬리티만을 중요시합니다 . 이유는 제안요청을 한 의뢰자는 눈에 보이는 면만 관심 있게 보기 때문에 , 그것만으로도 계약이 체결되는 경우가 많기 때문이죠 . 그래서 웹에이전시 업체들은 대부분 기술적인 마인드가 부족한 경우가 많습니다 .

하지만 , 인터넷이 점점 발달되면서 , 요즘 사이트를 의뢰자는 웹서버 하나만으로 모든 것을 감당할 수 있는 사이트를제작을 의뢰하지는 않습니다 . UMS, 메신저 , 인터넷방송국 등 기술적인 스팩을 요구하는 의뢰가 점차 늘어나고 있지요 .

요즘 웹에이전시의 웹기획자 라면 단순한 디자인 , 사용자 위주의 네비게이션 설계 , 비즈니스 흐름만 파악만으로는 경쟁력이 없다고 생각합니다 .

웹에이전시 업체들이 시스템통합 (SI)업체들과 제휴를 맺는 추세도 그러한 이유겠지요 .

웹기획자라면 프로젝트가 진행되면서 일정을 관리하게 되는데 , 웹기획자도 디자인이라면 디자인 , 개발이면 개발 프로젝트의 일부분을 자신이 직접 개발에 참여하는 것이 진정한 웹기획자가 않을까 싶습니다 .