SlideShare a Scribd company logo
1 of 26
웹 기획 및 관리
웹사이트 기획의 실무
웹사이트 개발개념
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
웹사이트 기획의 실무
웹사이트 개발개념 ( 설명 )
위 내용은 서버와 클라이언트의 관계에서 해석 (Parsing) 을 어디서 하는가에 따른 개념을 설명하고 있습니다 .
데이터 전송은 Client( 웹브라이저 ) 에서 데이터를 요구 (Request) 하면 서버에서는 해당되는 내용을 응답 (Response) 하는
과정을 거칩니다 .
이때 , 응답하여 보내어지는 데이터가 서버에서 이미 해석을 해서 웹브라우저에서 보여줄 수 있는 방식과 , 해석되지 않은
데이터를 웹브라우져에서 해석하여 여러분에게 보여주는 방식 두가지로 구분됩니다 .
서버에서 먼저 해석하여 클라이언트에서 이미 해석된 결과를 보여 줄 수 있도록 작성하는 것을 서버 프로그래밍이라고 하며 ,
일단 데이터를 전송한 후 Client( 웹브라우저 ) 에서 이를 해석하여 사용자에게 보여주기 위해 작성하는 것을 클라이언트 프로그래밍
이라고 합니다 .
서버프로그래밍은 ASP,PHP,JSP 등이 있으며 , 데이타베이스와 연동이 가능하며 , 소스가 보안이 되지요 . 물론 보안이라는 것은
완벽한 것은 없겠지만 , 클라이언트에게 소스가 노출 되지 않습니다 . 이유는 서버에서 이미 해석한 결과물을 클라이언트에서
전송했기 때문이죠 . 가장 큰 매력은 서버 프로그래밍은 데이터베이스와 연동이 가능하다는 점입니다 .
클라이언트 프로그래밍은 여러분들이 잘 아시는 HTML, CSS, JAVASCRIPT 를 뜻합니다 . 서버에서는 작성된 HTML 문서에 있는
내용을 서버에서 해석하지 않고 , 클라이언트의 웹브라우저에서 해석합니다 . 하지만 작성된 언어가 웹브라우저의 버전이나
종류에 따라 지원이 불가능 할 수 있고 , 소스가 그대로 노출 된다는 단점이 있습니다 . 장점으로는 클라이언트에서 바로
해석되기 때문에 속도가 빠르지요 . 주로 웹브라우저를 제어하거나 , 마우스를 올리면 이미지가 바뀌는 롤오버 이미지 , 회원가입시
정해진 양식에 데이터를 입력하지 않았을 때 경고메세지를 띄우는 등 간단한 처리에 많이 사용합니다 .
웹사이트 기획의 실무
데이타베이스 개념
개념 : 데이터 입력 (Insert)
Client 가 게시물을 작성
사용자가 입력한 데이타를 DataBase 에 저장
개념 : 데이터 검색 (Select)
DataBase 에서 데이터를 꺼내와서 레코드단위별로
(RecordSet) 데이터를 표 형태로 보여줌
개념 : 데이터 수정 (Update)
기존에 있던 데이터를 다른 데이터로 변경
게시물을 삭제하였습니다 .
개념 : 데이터 삭제 (Delete)
데이타베이스에 있는 데이터를
삭제함
웹사이트 기획의 실무
데이타베이스 개념 ( 설명 )
개발을 하기 위해서는 데이타베이스의 개념을 빠트릴 수 가 없습니다 .
사용자가 가입했을 때 입력한 데이터 , 게시판작성 등 모든 데이터를 데이타베이스에 저장하고 , 또 그것을 사용자에게 뿌려주기
때문이죠 .
물론 이런 데이터를 간단한 파일에 저장도 가능합니다 . 하지만 , 관계형 데이타베이스 관리 시스템 (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) 문
라고 합니다
웹사이트 기획의 실무
웹사이트 개발 기획 프로세스
• 스토리보드 기획
• DB 정책 기획
• 페이지별 DFD 기획
• 스토리보드 기획
• DB 정책 기획
• 페이지별 DFD 기획
기획
• 로직 타당성 검토 및 협의
• 개발 역량 타당성 검토 및
협의
• 일정 협의
• 로직 타당성 검토 및 협의
• 개발 역량 타당성 검토 및
협의
• 일정 협의
개발 회의
• 데이타베이스 정규화
• 데이타베이스 설계 (ERD)
• 코딩
• 알파 / 베타 테스트
• 런칭
• 데이타베이스 정규화
• 데이타베이스 설계 (ERD)
• 코딩
• 알파 / 베타 테스트
• 런칭
개발
웹사이트 개발 기획 프로세스 ( 설명 )
웹을 개발을 하기 위한 프로세스는 기획 -> 개발회의 -> 개발의 프로세스를 거칩니다 . 웹기획자가 스토리보드와 DB 정책 , 페이지별
DFD 를 기획하는데 스토리보드는 디자이너와 개발자 위해 만드는 것이고 , DB 정책은 데이타베이스를 설계 (ERD) 하기 위해 만듭니다 .
그리고 , 페이지별 DFD(Data Flow Diagram) 은 개발자가 페이지 흐름의 로직을 이해하기 위해 만듭니다
이렇게 만들어진 기획서는 개발자와 함께 타당성을 검토 및 협의를 하게 됩니다 . 개발자가 일정안에 구현 가능한 여부를 협의하게
되는 것이지요 .
그 다음 개발자는 데이타베이스를 정규화하게 됩니다 . 데이터베이스를 정규화하고 설계하는 것은 스키마라고 표현합니다 .
더 자세하게는 설명을 하면 데이터베이스 책한권을 써야 될것 같아서요 . 관심있으신 분은 데이타베이스 책을 사서 더 깊숙하게
공부해보세요 .
그 후 프로그래밍 작업을 거처 알파 / 베타테스트와 런칭을 하게 되는 것이죠 .
I. DB 정책
웹사이트 기획의 실무
웹사이트 기획의 실무
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 설정
웹사이트 기획의 실무
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 설정
웹사이트 기획의 실무
참고 : ERD(Entity Realatonship Diagram)
웹사이트 기획의 실무
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 를 컨스톨 가능하게 됩니다 .
II. DFD(Data Flow Diagram) 기획
웹사이트 기획의 실무
회원 가입 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
회원 table
insert
Post
Post
회원 가입 DFD ( 설명 )
웹사이트 기획의 실무
DFD 는 페이지의 흐름을 로직화 한것입니다 . Page Key 라는 제가 임의로 설정한 것인데 , 스토리보드안의 각각 페이지마다
Page Key 라는 것을 이름을 중복시키지 않게 적어놓고 , 이것은 DFD 에서 각 페이지이름을 Page Key 로 두게되면 페이지 개수가
많아져도 개발 할 때 이 Page Key 로 페이지접근을 쉽게 할 수 있습니다 . Page Key 는 누구나 알 수 있는 이름으로 짓는 것도 좋고 ,
파일명으로 사용해도 좋습니다 .
DFD 를 그리기 위해서는 시작과 끝을 명시하고 , 페이지 흐름이 조건에 따라 달라질 경우에는 정확하게 명시해 줘야
합니다 . 또 , DB 를 핸들링 할 경우도 명시를 해줘야 하구요 . 위는 회원가입 DFD 를 그린 것이고 , 게시판 등도 정확하게
작성해주면 좋습니다 . 일정이 시급한 경우에는 플로우 차트가 생략하는 경우가 있는데 이것은 옳지 못한 방법입니다 .
웹에이전시 업체의 웹기획자라면 기존에 작성된 플로우 차트를 라이브러리로 지니고 있고 , 새로운 프로젝트가 있을 때 똑같은
플로우 차트를 조금씩 수정하면서 사용하면 됩니다 . 개발자에게 이러한 플로우차트를 제시하지 않게 되면 나중에 엉뚱하게 만들고
나서 웹기획자에게 책임을 전가해도 웹기획자는 할말이 없게 됩니다 . 오해할 소지가 있을 지 모르겠지만 책임을 회피하기
위해 만든다는 의미가 아니라 가장 빠르고 효율적인 프로젝트를 위해서는 플로우 차트를 정확하게 작성해야 힘 빠지는
재작업을 최소화 할 수 있습니다 . 훌륭한 웹기획자라면 가장 복잡한 게시판 같은 경우도 자기만의 DFD 및 스토리보드를
미리 작성해 놓고 프로젝트시 언제든지 개발자에게 명시할 수 있어야 하며 , 그것을 자신만의 것으로 계속적으로 업그레이드를
할 수 있어야 합니다 . .
게시판 DFD
Page-Key : List
게시판 리스트
웹사이트 기획의 실무
Page-Key : Content
게시물 내용
Get
Page-Key : Write
게시물 쓰기 / 답장
Page-Key : Edit
게시물 수정
Page-Key : Edit
게시물 삭제
게시판 table
Insert/update
게시판 table
Update
게시판 table
delete
Get
Get
Get
삭제클릭
쓰기 or 답장 클릭
게시물 클릭
쓰기 클릭
수정 클릭
삭제클릭
게시판 DFD 설명
웹사이트 기획의 실무
위는 게시판 DFD 입니다 . 다르게 말한다면 , 게시판에 있는 모든 네비게이션 흐름도라고도 설명할 수 있겠지요 .
프로젝트가 진행될 때 위의 흐름도의 역할은 매우 중요합니다 . 전체적으로 페이지 로직에 따른 흐름을 이해 할 수 있기 때문입니다 .
물론 , 게시판은 매우 정형화 된 것이기 때문에 이러한 흐름도를 그리지 않아도 프로그래머가 쉽게 제작할 수 있습니다 .
하지만 , 전혀 새로운 방식의 프로젝트를 진행한다면 , 위와 같은 DFD 가 없으면 프로그래머는 프로젝트를 진행하는데 많은
에러사항이 있게 됩니다 .
GET 과 POST 는 데이터를 전송하는 방식을 말합니다 .
간단하게 설명하여 , GET 방식은 URL 주소에 데이타값을 다음페이지로 넘겨주는 방식입니다 . POST 방식은 HTTP 헤더 안에 데이터를
넣어서 보냅니다 .
차이점이라면 GET 방식은 URL 주소로 넘겨주는 값이 보이기 때문에 , 로그인을 GET 방식으로 한다면 아이디와 패스워드가 URL 주소에
보여지겠지요 .
POST 방식은 HTTP 헤더안에 데이터를 넣어서 보내지기 때문에 사용자는 페이지에서 페이지를 넘어갈 때 무슨 값이 넘어갔는지 알
수 없습니다 .
그래서 , 보통 GET 방식은 URL 주소로 컨텐츠를 접근하고자 할 때 쓰입니다 . 주로 게시판의 게시물 , 뉴스레터의 컨텐츠 , 쇼핑몰의
상품목록 등에 많이 쓰구요 .
POST 방식은 로그인이나 회원가입 등에 쓰입니다 .
III. 스토리보드
웹사이트 기획의 실무
게시판 스토리보드
웹사이트 기획의 실무
번호 작성자 제 목 작성일 조회수
< 번호
>
②< 작성자
>
① < 게시판 제목 > <YYYY-MM-DD> < 조회수 >
답변했을 경우
최근 하루 게시물
제목
작성자
내용
◀  [ 1 2 3 4 ] ▶
① GET 방식 CONTENT 로 링크 ② 작성자 E-MAIL 링크 ③ 최대 10, 이상일 경우 , ◀ ▶ 활성화
④ 작성일 내림차순 정렬 ⑤ 답변형 이미지 ⑥ 최근 게시물 (24 시간으로 설정 )
⑦ ⑧ ⑨
PAGE KEY LIST TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSIO
N
ON (ID) PROGRAM ASP, JS
네비게이션 & 설명
③
④
NAVIGATION-PATH 홈 > 게시판
게시판
⑤
⑥
반복구간10 번반복
게시판 스토리보드
웹사이트 기획의 실무
① WRITE 로 링크 ② LIST 로 링크 ③ 답변형 WRITE 로 링크
④ 수정형 WRITE 로 링크 ⑤ PASSWORD 로 링크 ⑥ 이전 레코드 ( 게시물 ) 로 이동
⑦ 다음 레코드 ( 게시물 ) 로 이동 ⑧ ⑨
PAGE KEY CONTENT TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSIO
N
ON (ID) PROGRAM ASP, JS
네비게이션 & 설명
NAVIGATION-PATH 홈 > 게시판 > 게시물 제목 클릭 ( 컨텐츠 )
제목 < 게시판 제목 >
작성일 <YYYY-MM-DD> < 번호 >번호 < 조회수 >조회수
< 내용 >
작성자 < 작성자 >
게시판
① ② ③ ④< > ⑥⑦
게시판 스토리보드
웹사이트 기획의 실무
① 입력된 데이터 submit (null 체크 ) ② 입력된 데이터를 지우고 작성자에 focus ③
④ ⑤ ⑥
⑦ ⑧ ⑨
PAGE KEY WRITE TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION ON (ID) PROGRAM ASP, JS
네비게이션 & 설명
NAVIGATION-PATH 홈 > 게시판 > 게시물 WRITE 클릭
게시판
글쓰기
작성자
E-MAIL
제 목
내 용
비밀번호
① ②
게시판 스토리보드
웹사이트 기획의 실무
① 수정할 게시물 작성자 출력 ② 수정할 게시물 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 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> < 조회수 >
게시판 스토리보드 ( 설명 )
웹사이트 기획의 실무
반복하는 방식은 표 (TABLE) 형태로 가능하며 여러가지 형태가 나올 수 있습니다 .
주의할 점은 반복하는 구간의 항목은 항상 같아야한다는 점입니다 .
세로 반복횟수명시
가로 반복횟수명시
가로 반복횟수명시
세로 반복횟수명시
쇼핑몰 상품전시에 많이 쓰이는 방식
게시판에 많이 쓰이는 방식
개념설명
웹사이트 기획의 실무
1. 데이타베이스에서 일정한 조건으로 검색 (select)
검색
개념설명
웹사이트 기획의 실무
2. 검색한 부분을 Record 단위로 저장
Record 단위로 각각을 저장
3. 웹브라우저에 Record 의 각 항목을 세로로 반복시켜 출력
title pwd email num writeday
상위 부분을 출력
마치면서
웹사이트 기획의 실무
의뢰자가 제안요청을 통하여 사이트를 의뢰하는 과정에서 대부분의 웹에이전시 업체들은 디자인적인 컬리티만을 중요시
합니다 . 이유는 제안요청을 한 의뢰자는 눈에 보이는 면만 관심 있게 보기 때문에 , 그것만으로도 계약이 체결되는 경우
가 많기 때문이죠 . 그래서 웹에이전시 업체들은 대부분 기술적인 마인드가 부족한 경우가 많습니다 .
하지만 , 인터넷이 점점 발달되면서 , 요즘 사이트를 의뢰자는 웹서버 하나만으로 모든 것을 감당할 수 있는 사이트를
제작을 의뢰하지는 않습니다 . UMS, 메신저 , 인터넷방송국 등 기술적인 스팩을 요구하는 의뢰가 점차 늘어나고 있지요 .
요즘 웹에이전시의 웹기획자 라면 단순한 디자인 , 사용자 위주의 네비게이션 설계 , 비즈니스 흐름만 파악만으로는
경쟁력이 없다고 생각합니다 .
웹에이전시 업체들이 시스템통합 (SI) 업체들과 제휴를 맺는 추세도 그러한 이유겠지요 .
웹기획자라면 프로젝트가 진행되면서 일정을 관리하게 되는데 , 웹기획자도 디자인이라면 디자인 , 개발이면 개발
프로젝트의 일부분을 자신이 직접 개발에 참여하는 것이 진정한 웹기획자가 않을까 싶습니다 .

More Related Content

What's hot

ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門Takuya Kitamura
 
Roles, Responsibilities, Collaborations
Roles, Responsibilities, CollaborationsRoles, Responsibilities, Collaborations
Roles, Responsibilities, CollaborationsYoung-Ho Cho
 
[261] 실시간 추천엔진 머신한대에 구겨넣기
[261] 실시간 추천엔진 머신한대에 구겨넣기[261] 실시간 추천엔진 머신한대에 구겨넣기
[261] 실시간 추천엔진 머신한대에 구겨넣기NAVER D2
 
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)Suhyun Park
 
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...BOAZ Bigdata
 
안정적인 서비스 운영 2014.03
안정적인 서비스 운영   2014.03안정적인 서비스 운영   2014.03
안정적인 서비스 운영 2014.03Changyol BAEK
 
ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2増田 亨
 
Data Engineering 101
Data Engineering 101Data Engineering 101
Data Engineering 101DaeMyung Kang
 
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)Lee Seungeun
 
[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리KyeongWon Koo
 
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기경원 이
 
Java8から17へ
Java8から17へJava8から17へ
Java8から17へonozaty
 
Google Cloud IAM 계정, 권한 및 조직 관리
Google Cloud IAM 계정, 권한 및 조직 관리Google Cloud IAM 계정, 권한 및 조직 관리
Google Cloud IAM 계정, 권한 및 조직 관리정명훈 Jerry Jeong
 
테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템QooJuice
 
[수정본] 우아한 객체지향
[수정본] 우아한 객체지향[수정본] 우아한 객체지향
[수정본] 우아한 객체지향Young-Ho Cho
 
도메인구현 KSUG 20151128
도메인구현 KSUG 20151128도메인구현 KSUG 20151128
도메인구현 KSUG 20151128beom kyun choi
 
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기강 민우
 
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016Taehoon Kim
 
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이 왜 이리 힘드나요? (Lock-free에서 Transactional Memory까지)
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이  왜 이리 힘드나요?  (Lock-free에서 Transactional Memory까지)Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이  왜 이리 힘드나요?  (Lock-free에서 Transactional Memory까지)
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이 왜 이리 힘드나요? (Lock-free에서 Transactional Memory까지)내훈 정
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선기동 이
 

What's hot (20)

ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門
 
Roles, Responsibilities, Collaborations
Roles, Responsibilities, CollaborationsRoles, Responsibilities, Collaborations
Roles, Responsibilities, Collaborations
 
[261] 실시간 추천엔진 머신한대에 구겨넣기
[261] 실시간 추천엔진 머신한대에 구겨넣기[261] 실시간 추천엔진 머신한대에 구겨넣기
[261] 실시간 추천엔진 머신한대에 구겨넣기
 
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
코딩 테스트 및 알고리즘 문제해결 공부 방법 (고려대학교 KUCC, 2022년 4월)
 
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...
제 13회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [GAN 안 쓰는 세얼GAN이들] : 코로나 언택트 시대, 나의 홈트레이닝을 도와줄 AI...
 
안정적인 서비스 운영 2014.03
안정적인 서비스 운영   2014.03안정적인 서비스 운영   2014.03
안정적인 서비스 운영 2014.03
 
ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2ドメイン駆動設計(DDD)の実践Part2
ドメイン駆動設計(DDD)の実践Part2
 
Data Engineering 101
Data Engineering 101Data Engineering 101
Data Engineering 101
 
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)
CNN 초보자가 만드는 초보자 가이드 (VGG 약간 포함)
 
[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리[0122 구경원]게임에서의 충돌처리
[0122 구경원]게임에서의 충돌처리
 
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
 
Java8から17へ
Java8から17へJava8から17へ
Java8から17へ
 
Google Cloud IAM 계정, 권한 및 조직 관리
Google Cloud IAM 계정, 권한 및 조직 관리Google Cloud IAM 계정, 권한 및 조직 관리
Google Cloud IAM 계정, 권한 및 조직 관리
 
테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템테라로 살펴본 MMORPG의 논타겟팅 시스템
테라로 살펴본 MMORPG의 논타겟팅 시스템
 
[수정본] 우아한 객체지향
[수정본] 우아한 객체지향[수정본] 우아한 객체지향
[수정본] 우아한 객체지향
 
도메인구현 KSUG 20151128
도메인구현 KSUG 20151128도메인구현 KSUG 20151128
도메인구현 KSUG 20151128
 
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기
 
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016
딥러닝과 강화 학습으로 나보다 잘하는 쿠키런 AI 구현하기 DEVIEW 2016
 
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이 왜 이리 힘드나요? (Lock-free에서 Transactional Memory까지)
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이  왜 이리 힘드나요?  (Lock-free에서 Transactional Memory까지)Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이  왜 이리 힘드나요?  (Lock-free에서 Transactional Memory까지)
Ndc2014 시즌 2 : 멀티쓰레드 프로그래밍이 왜 이리 힘드나요? (Lock-free에서 Transactional Memory까지)
 
Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선Front end 웹사이트 성능 측정 및 개선
Front end 웹사이트 성능 측정 및 개선
 

Viewers also liked

DB Project - Gmarket
DB Project - Gmarket DB Project - Gmarket
DB Project - Gmarket Han Sung Kim
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)ideaguide
 
두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획Woosung Kim
 
서비스중인 게임 DB 설계 (쿠키런 편)
서비스중인 게임 DB 설계 (쿠키런 편)서비스중인 게임 DB 설계 (쿠키런 편)
서비스중인 게임 DB 설계 (쿠키런 편)_ce
 
모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기Jae-hyung Park
 
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트mosaicnet
 
사업예산실무 Intro 120530_prezi
사업예산실무 Intro 120530_prezi사업예산실무 Intro 120530_prezi
사업예산실무 Intro 120530_preziHipertech Inc.
 
장아찌사업계획서(0623)
장아찌사업계획서(0623)장아찌사업계획서(0623)
장아찌사업계획서(0623)Hipertech Inc.
 
창업론2조발표
창업론2조발표창업론2조발표
창업론2조발표Inyoung Lee
 
고산 약속타운 사업계획서 임경수
고산 약속타운 사업계획서   임경수고산 약속타운 사업계획서   임경수
고산 약속타운 사업계획서 임경수seekly
 
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업Steve Kim
 
기획자의불편한진실
기획자의불편한진실기획자의불편한진실
기획자의불편한진실cheonsu park
 
Xe extension 제안 및 기획
Xe extension 제안 및 기획Xe extension 제안 및 기획
Xe extension 제안 및 기획재린 김
 
Web Plan1 4
Web Plan1 4Web Plan1 4
Web Plan1 4juhyun
 
스마트워치용 컨텐츠 플랫폼: 틈타
스마트워치용 컨텐츠 플랫폼: 틈타스마트워치용 컨텐츠 플랫폼: 틈타
스마트워치용 컨텐츠 플랫폼: 틈타Doyoung Oh
 
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]용호 김
 
소셜 웹 기획 책정리
소셜 웹 기획 책정리소셜 웹 기획 책정리
소셜 웹 기획 책정리Yoona Hong
 
부동산 자산관리 매니저 과정
부동산 자산관리 매니저 과정부동산 자산관리 매니저 과정
부동산 자산관리 매니저 과정수정 민
 
[기획의발견]오늘의앱리뷰1 직방
[기획의발견]오늘의앱리뷰1 직방 [기획의발견]오늘의앱리뷰1 직방
[기획의발견]오늘의앱리뷰1 직방 영주 홍
 
스토리보드.Wapp.인트라넷
스토리보드.Wapp.인트라넷스토리보드.Wapp.인트라넷
스토리보드.Wapp.인트라넷Cho Ho
 

Viewers also liked (20)

DB Project - Gmarket
DB Project - Gmarket DB Project - Gmarket
DB Project - Gmarket
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
 
두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획두번째단추 디지털마케팅 웹기획
두번째단추 디지털마케팅 웹기획
 
서비스중인 게임 DB 설계 (쿠키런 편)
서비스중인 게임 DB 설계 (쿠키런 편)서비스중인 게임 DB 설계 (쿠키런 편)
서비스중인 게임 DB 설계 (쿠키런 편)
 
모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기모바일 서비스 기획 시작하기
모바일 서비스 기획 시작하기
 
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
사례로 본 모바일 웹/앱 기획, 제작 과정 및 포인트
 
사업예산실무 Intro 120530_prezi
사업예산실무 Intro 120530_prezi사업예산실무 Intro 120530_prezi
사업예산실무 Intro 120530_prezi
 
장아찌사업계획서(0623)
장아찌사업계획서(0623)장아찌사업계획서(0623)
장아찌사업계획서(0623)
 
창업론2조발표
창업론2조발표창업론2조발표
창업론2조발표
 
고산 약속타운 사업계획서 임경수
고산 약속타운 사업계획서   임경수고산 약속타운 사업계획서   임경수
고산 약속타운 사업계획서 임경수
 
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업
마이크로소프트 클라우드 Erp 서비스 nav 2013 소개 비영리법인 및 공공산업
 
기획자의불편한진실
기획자의불편한진실기획자의불편한진실
기획자의불편한진실
 
Xe extension 제안 및 기획
Xe extension 제안 및 기획Xe extension 제안 및 기획
Xe extension 제안 및 기획
 
Web Plan1 4
Web Plan1 4Web Plan1 4
Web Plan1 4
 
스마트워치용 컨텐츠 플랫폼: 틈타
스마트워치용 컨텐츠 플랫폼: 틈타스마트워치용 컨텐츠 플랫폼: 틈타
스마트워치용 컨텐츠 플랫폼: 틈타
 
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]
언리얼4, 유니티 교육 과정 5월 소개서 [스킬트리랩]
 
소셜 웹 기획 책정리
소셜 웹 기획 책정리소셜 웹 기획 책정리
소셜 웹 기획 책정리
 
부동산 자산관리 매니저 과정
부동산 자산관리 매니저 과정부동산 자산관리 매니저 과정
부동산 자산관리 매니저 과정
 
[기획의발견]오늘의앱리뷰1 직방
[기획의발견]오늘의앱리뷰1 직방 [기획의발견]오늘의앱리뷰1 직방
[기획의발견]오늘의앱리뷰1 직방
 
스토리보드.Wapp.인트라넷
스토리보드.Wapp.인트라넷스토리보드.Wapp.인트라넷
스토리보드.Wapp.인트라넷
 

Similar to 웹사이트기획 및 관리

SJBoard Project Portfolio
SJBoard Project PortfolioSJBoard Project Portfolio
SJBoard Project PortfolioJuyoungKang7
 
2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현kdh24
 
반복적인 코드 작업 자동화, Codebone으로 손쉽게
반복적인 코드 작업 자동화, Codebone으로 손쉽게반복적인 코드 작업 자동화, Codebone으로 손쉽게
반복적인 코드 작업 자동화, Codebone으로 손쉽게Sungju Jin
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용중선 곽
 
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
 
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)JoonHee Lee
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database승빈이네 공작소
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)수보 김
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판hyeonjae Cheon
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220Seomgi Han
 
삶이편해지는_백엔드_개발자_지식.pdf
삶이편해지는_백엔드_개발자_지식.pdf삶이편해지는_백엔드_개발자_지식.pdf
삶이편해지는_백엔드_개발자_지식.pdfSeung kyoo Park
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께지수 윤
 
스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글라한사 아
 
Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기Inho Kwon
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)형석 장
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)형석 장
 
Spring@mvc웹호스팅
Spring@mvc웹호스팅Spring@mvc웹호스팅
Spring@mvc웹호스팅J.H Ahn
 

Similar to 웹사이트기획 및 관리 (20)

SJBoard Project Portfolio
SJBoard Project PortfolioSJBoard Project Portfolio
SJBoard Project Portfolio
 
2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현
 
반복적인 코드 작업 자동화, Codebone으로 손쉽게
반복적인 코드 작업 자동화, Codebone으로 손쉽게반복적인 코드 작업 자동화, Codebone으로 손쉽게
반복적인 코드 작업 자동화, Codebone으로 손쉽게
 
Portfolio
PortfolioPortfolio
Portfolio
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
 
웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)웹기술 이해 (프론트엔드 기초)
웹기술 이해 (프론트엔드 기초)
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
 
서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)서버학개론(백엔드 서버 개발자를 위한)
서버학개론(백엔드 서버 개발자를 위한)
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판신입 웹 개발자 포트폴리오 / 댓글 게시판
신입 웹 개발자 포트폴리오 / 댓글 게시판
 
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
피플펀드 웹서비스 성능개선기(+초기 스타트업의 개발방법론) 20171220
 
Web Project
Web ProjectWeb Project
Web Project
 
삶이편해지는_백엔드_개발자_지식.pdf
삶이편해지는_백엔드_개발자_지식.pdf삶이편해지는_백엔드_개발자_지식.pdf
삶이편해지는_백엔드_개발자_지식.pdf
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글
 
Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기Node.js에서 공공API를 활용해서 개발하기
Node.js에서 공공API를 활용해서 개발하기
 
Delivrary intro
Delivrary introDelivrary intro
Delivrary intro
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)
 
Team project(for fullstack)
Team project(for fullstack)Team project(for fullstack)
Team project(for fullstack)
 
Spring@mvc웹호스팅
Spring@mvc웹호스팅Spring@mvc웹호스팅
Spring@mvc웹호스팅
 

More from 봉조 김

창의·융합·문제해결을 배우는 메이커 활동 리스트
창의·융합·문제해결을 배우는 메이커 활동 리스트창의·융합·문제해결을 배우는 메이커 활동 리스트
창의·융합·문제해결을 배우는 메이커 활동 리스트봉조 김
 
Softboxcoding brand name
Softboxcoding brand nameSoftboxcoding brand name
Softboxcoding brand name봉조 김
 
Weather station performance sharing
Weather station performance sharingWeather station performance sharing
Weather station performance sharing봉조 김
 
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서봉조 김
 
Softbox coding - raspberrypi3 b+ 2019 Lecture File
Softbox coding - raspberrypi3 b+ 2019 Lecture File Softbox coding - raspberrypi3 b+ 2019 Lecture File
Softbox coding - raspberrypi3 b+ 2019 Lecture File 봉조 김
 
Sw education and maker
Sw education and makerSw education and maker
Sw education and maker봉조 김
 
소프트박스 라즈베리파이 교육키트 개발환경 설정
소프트박스 라즈베리파이 교육키트 개발환경 설정소프트박스 라즈베리파이 교육키트 개발환경 설정
소프트박스 라즈베리파이 교육키트 개발환경 설정봉조 김
 
Expansion of maker culture and promotion of maker activity
Expansion of maker culture and promotion of maker activityExpansion of maker culture and promotion of maker activity
Expansion of maker culture and promotion of maker activity봉조 김
 
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단2018년 따복공동체 활동 공유 - 과천 디지털 창작집단
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단봉조 김
 
강사료 원천징수 관련 설명자료
강사료 원천징수 관련 설명자료강사료 원천징수 관련 설명자료
강사료 원천징수 관련 설명자료봉조 김
 
Softbox review and quickstartguide-20180926
Softbox review and quickstartguide-20180926Softbox review and quickstartguide-20180926
Softbox review and quickstartguide-20180926봉조 김
 
디지털창작집단 활동 소개문서
디지털창작집단 활동 소개문서디지털창작집단 활동 소개문서
디지털창작집단 활동 소개문서봉조 김
 
Softbox arduino software education, softbox 소프트박스 제품소개서
Softbox arduino software education, softbox 소프트박스 제품소개서 Softbox arduino software education, softbox 소프트박스 제품소개서
Softbox arduino software education, softbox 소프트박스 제품소개서 봉조 김
 
Stuffed animals 20180605
Stuffed animals 20180605Stuffed animals 20180605
Stuffed animals 20180605봉조 김
 
20180329 reco computer for maker
20180329 reco computer for maker20180329 reco computer for maker
20180329 reco computer for maker봉조 김
 
2018 donga marathon training schedule
2018 donga marathon training schedule2018 donga marathon training schedule
2018 donga marathon training schedule봉조 김
 
2017 marathob trainning schedule
2017 marathob trainning schedule2017 marathob trainning schedule
2017 marathob trainning schedule봉조 김
 
Marathon safe guide
Marathon safe guideMarathon safe guide
Marathon safe guide봉조 김
 
사물인터넷서비스와 클라우드
사물인터넷서비스와 클라우드사물인터넷서비스와 클라우드
사물인터넷서비스와 클라우드봉조 김
 
4차 산업혁명과 io t 20170919
4차 산업혁명과 io t  201709194차 산업혁명과 io t  20170919
4차 산업혁명과 io t 20170919봉조 김
 

More from 봉조 김 (20)

창의·융합·문제해결을 배우는 메이커 활동 리스트
창의·융합·문제해결을 배우는 메이커 활동 리스트창의·융합·문제해결을 배우는 메이커 활동 리스트
창의·융합·문제해결을 배우는 메이커 활동 리스트
 
Softboxcoding brand name
Softboxcoding brand nameSoftboxcoding brand name
Softboxcoding brand name
 
Weather station performance sharing
Weather station performance sharingWeather station performance sharing
Weather station performance sharing
 
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서
Aircleaner 20190616 - 미세먼지 공기청정기 메이커활동 제안서
 
Softbox coding - raspberrypi3 b+ 2019 Lecture File
Softbox coding - raspberrypi3 b+ 2019 Lecture File Softbox coding - raspberrypi3 b+ 2019 Lecture File
Softbox coding - raspberrypi3 b+ 2019 Lecture File
 
Sw education and maker
Sw education and makerSw education and maker
Sw education and maker
 
소프트박스 라즈베리파이 교육키트 개발환경 설정
소프트박스 라즈베리파이 교육키트 개발환경 설정소프트박스 라즈베리파이 교육키트 개발환경 설정
소프트박스 라즈베리파이 교육키트 개발환경 설정
 
Expansion of maker culture and promotion of maker activity
Expansion of maker culture and promotion of maker activityExpansion of maker culture and promotion of maker activity
Expansion of maker culture and promotion of maker activity
 
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단2018년 따복공동체 활동 공유 - 과천 디지털 창작집단
2018년 따복공동체 활동 공유 - 과천 디지털 창작집단
 
강사료 원천징수 관련 설명자료
강사료 원천징수 관련 설명자료강사료 원천징수 관련 설명자료
강사료 원천징수 관련 설명자료
 
Softbox review and quickstartguide-20180926
Softbox review and quickstartguide-20180926Softbox review and quickstartguide-20180926
Softbox review and quickstartguide-20180926
 
디지털창작집단 활동 소개문서
디지털창작집단 활동 소개문서디지털창작집단 활동 소개문서
디지털창작집단 활동 소개문서
 
Softbox arduino software education, softbox 소프트박스 제품소개서
Softbox arduino software education, softbox 소프트박스 제품소개서 Softbox arduino software education, softbox 소프트박스 제품소개서
Softbox arduino software education, softbox 소프트박스 제품소개서
 
Stuffed animals 20180605
Stuffed animals 20180605Stuffed animals 20180605
Stuffed animals 20180605
 
20180329 reco computer for maker
20180329 reco computer for maker20180329 reco computer for maker
20180329 reco computer for maker
 
2018 donga marathon training schedule
2018 donga marathon training schedule2018 donga marathon training schedule
2018 donga marathon training schedule
 
2017 marathob trainning schedule
2017 marathob trainning schedule2017 marathob trainning schedule
2017 marathob trainning schedule
 
Marathon safe guide
Marathon safe guideMarathon safe guide
Marathon safe guide
 
사물인터넷서비스와 클라우드
사물인터넷서비스와 클라우드사물인터넷서비스와 클라우드
사물인터넷서비스와 클라우드
 
4차 산업혁명과 io t 20170919
4차 산업혁명과 io t  201709194차 산업혁명과 io t  20170919
4차 산업혁명과 io t 20170919
 

웹사이트기획 및 관리

  • 1. 웹 기획 및 관리
  • 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
  • 3. 웹사이트 기획의 실무 웹사이트 개발개념 ( 설명 ) 위 내용은 서버와 클라이언트의 관계에서 해석 (Parsing) 을 어디서 하는가에 따른 개념을 설명하고 있습니다 . 데이터 전송은 Client( 웹브라이저 ) 에서 데이터를 요구 (Request) 하면 서버에서는 해당되는 내용을 응답 (Response) 하는 과정을 거칩니다 . 이때 , 응답하여 보내어지는 데이터가 서버에서 이미 해석을 해서 웹브라우저에서 보여줄 수 있는 방식과 , 해석되지 않은 데이터를 웹브라우져에서 해석하여 여러분에게 보여주는 방식 두가지로 구분됩니다 . 서버에서 먼저 해석하여 클라이언트에서 이미 해석된 결과를 보여 줄 수 있도록 작성하는 것을 서버 프로그래밍이라고 하며 , 일단 데이터를 전송한 후 Client( 웹브라우저 ) 에서 이를 해석하여 사용자에게 보여주기 위해 작성하는 것을 클라이언트 프로그래밍 이라고 합니다 . 서버프로그래밍은 ASP,PHP,JSP 등이 있으며 , 데이타베이스와 연동이 가능하며 , 소스가 보안이 되지요 . 물론 보안이라는 것은 완벽한 것은 없겠지만 , 클라이언트에게 소스가 노출 되지 않습니다 . 이유는 서버에서 이미 해석한 결과물을 클라이언트에서 전송했기 때문이죠 . 가장 큰 매력은 서버 프로그래밍은 데이터베이스와 연동이 가능하다는 점입니다 . 클라이언트 프로그래밍은 여러분들이 잘 아시는 HTML, CSS, JAVASCRIPT 를 뜻합니다 . 서버에서는 작성된 HTML 문서에 있는 내용을 서버에서 해석하지 않고 , 클라이언트의 웹브라우저에서 해석합니다 . 하지만 작성된 언어가 웹브라우저의 버전이나 종류에 따라 지원이 불가능 할 수 있고 , 소스가 그대로 노출 된다는 단점이 있습니다 . 장점으로는 클라이언트에서 바로 해석되기 때문에 속도가 빠르지요 . 주로 웹브라우저를 제어하거나 , 마우스를 올리면 이미지가 바뀌는 롤오버 이미지 , 회원가입시 정해진 양식에 데이터를 입력하지 않았을 때 경고메세지를 띄우는 등 간단한 처리에 많이 사용합니다 .
  • 4. 웹사이트 기획의 실무 데이타베이스 개념 개념 : 데이터 입력 (Insert) Client 가 게시물을 작성 사용자가 입력한 데이타를 DataBase 에 저장 개념 : 데이터 검색 (Select) DataBase 에서 데이터를 꺼내와서 레코드단위별로 (RecordSet) 데이터를 표 형태로 보여줌 개념 : 데이터 수정 (Update) 기존에 있던 데이터를 다른 데이터로 변경 게시물을 삭제하였습니다 . 개념 : 데이터 삭제 (Delete) 데이타베이스에 있는 데이터를 삭제함
  • 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) 문 라고 합니다
  • 6. 웹사이트 기획의 실무 웹사이트 개발 기획 프로세스 • 스토리보드 기획 • DB 정책 기획 • 페이지별 DFD 기획 • 스토리보드 기획 • DB 정책 기획 • 페이지별 DFD 기획 기획 • 로직 타당성 검토 및 협의 • 개발 역량 타당성 검토 및 협의 • 일정 협의 • 로직 타당성 검토 및 협의 • 개발 역량 타당성 검토 및 협의 • 일정 협의 개발 회의 • 데이타베이스 정규화 • 데이타베이스 설계 (ERD) • 코딩 • 알파 / 베타 테스트 • 런칭 • 데이타베이스 정규화 • 데이타베이스 설계 (ERD) • 코딩 • 알파 / 베타 테스트 • 런칭 개발 웹사이트 개발 기획 프로세스 ( 설명 ) 웹을 개발을 하기 위한 프로세스는 기획 -> 개발회의 -> 개발의 프로세스를 거칩니다 . 웹기획자가 스토리보드와 DB 정책 , 페이지별 DFD 를 기획하는데 스토리보드는 디자이너와 개발자 위해 만드는 것이고 , DB 정책은 데이타베이스를 설계 (ERD) 하기 위해 만듭니다 . 그리고 , 페이지별 DFD(Data Flow Diagram) 은 개발자가 페이지 흐름의 로직을 이해하기 위해 만듭니다 이렇게 만들어진 기획서는 개발자와 함께 타당성을 검토 및 협의를 하게 됩니다 . 개발자가 일정안에 구현 가능한 여부를 협의하게 되는 것이지요 . 그 다음 개발자는 데이타베이스를 정규화하게 됩니다 . 데이터베이스를 정규화하고 설계하는 것은 스키마라고 표현합니다 . 더 자세하게는 설명을 하면 데이터베이스 책한권을 써야 될것 같아서요 . 관심있으신 분은 데이타베이스 책을 사서 더 깊숙하게 공부해보세요 . 그 후 프로그래밍 작업을 거처 알파 / 베타테스트와 런칭을 하게 되는 것이죠 .
  • 7. I. DB 정책 웹사이트 기획의 실무
  • 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 설정
  • 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 설정
  • 10. 웹사이트 기획의 실무 참고 : ERD(Entity Realatonship Diagram)
  • 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 를 컨스톨 가능하게 됩니다 .
  • 12. II. DFD(Data Flow Diagram) 기획 웹사이트 기획의 실무
  • 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 회원 table insert Post Post
  • 14. 회원 가입 DFD ( 설명 ) 웹사이트 기획의 실무 DFD 는 페이지의 흐름을 로직화 한것입니다 . Page Key 라는 제가 임의로 설정한 것인데 , 스토리보드안의 각각 페이지마다 Page Key 라는 것을 이름을 중복시키지 않게 적어놓고 , 이것은 DFD 에서 각 페이지이름을 Page Key 로 두게되면 페이지 개수가 많아져도 개발 할 때 이 Page Key 로 페이지접근을 쉽게 할 수 있습니다 . Page Key 는 누구나 알 수 있는 이름으로 짓는 것도 좋고 , 파일명으로 사용해도 좋습니다 . DFD 를 그리기 위해서는 시작과 끝을 명시하고 , 페이지 흐름이 조건에 따라 달라질 경우에는 정확하게 명시해 줘야 합니다 . 또 , DB 를 핸들링 할 경우도 명시를 해줘야 하구요 . 위는 회원가입 DFD 를 그린 것이고 , 게시판 등도 정확하게 작성해주면 좋습니다 . 일정이 시급한 경우에는 플로우 차트가 생략하는 경우가 있는데 이것은 옳지 못한 방법입니다 . 웹에이전시 업체의 웹기획자라면 기존에 작성된 플로우 차트를 라이브러리로 지니고 있고 , 새로운 프로젝트가 있을 때 똑같은 플로우 차트를 조금씩 수정하면서 사용하면 됩니다 . 개발자에게 이러한 플로우차트를 제시하지 않게 되면 나중에 엉뚱하게 만들고 나서 웹기획자에게 책임을 전가해도 웹기획자는 할말이 없게 됩니다 . 오해할 소지가 있을 지 모르겠지만 책임을 회피하기 위해 만든다는 의미가 아니라 가장 빠르고 효율적인 프로젝트를 위해서는 플로우 차트를 정확하게 작성해야 힘 빠지는 재작업을 최소화 할 수 있습니다 . 훌륭한 웹기획자라면 가장 복잡한 게시판 같은 경우도 자기만의 DFD 및 스토리보드를 미리 작성해 놓고 프로젝트시 언제든지 개발자에게 명시할 수 있어야 하며 , 그것을 자신만의 것으로 계속적으로 업그레이드를 할 수 있어야 합니다 . .
  • 15. 게시판 DFD Page-Key : List 게시판 리스트 웹사이트 기획의 실무 Page-Key : Content 게시물 내용 Get Page-Key : Write 게시물 쓰기 / 답장 Page-Key : Edit 게시물 수정 Page-Key : Edit 게시물 삭제 게시판 table Insert/update 게시판 table Update 게시판 table delete Get Get Get 삭제클릭 쓰기 or 답장 클릭 게시물 클릭 쓰기 클릭 수정 클릭 삭제클릭
  • 16. 게시판 DFD 설명 웹사이트 기획의 실무 위는 게시판 DFD 입니다 . 다르게 말한다면 , 게시판에 있는 모든 네비게이션 흐름도라고도 설명할 수 있겠지요 . 프로젝트가 진행될 때 위의 흐름도의 역할은 매우 중요합니다 . 전체적으로 페이지 로직에 따른 흐름을 이해 할 수 있기 때문입니다 . 물론 , 게시판은 매우 정형화 된 것이기 때문에 이러한 흐름도를 그리지 않아도 프로그래머가 쉽게 제작할 수 있습니다 . 하지만 , 전혀 새로운 방식의 프로젝트를 진행한다면 , 위와 같은 DFD 가 없으면 프로그래머는 프로젝트를 진행하는데 많은 에러사항이 있게 됩니다 . GET 과 POST 는 데이터를 전송하는 방식을 말합니다 . 간단하게 설명하여 , GET 방식은 URL 주소에 데이타값을 다음페이지로 넘겨주는 방식입니다 . POST 방식은 HTTP 헤더 안에 데이터를 넣어서 보냅니다 . 차이점이라면 GET 방식은 URL 주소로 넘겨주는 값이 보이기 때문에 , 로그인을 GET 방식으로 한다면 아이디와 패스워드가 URL 주소에 보여지겠지요 . POST 방식은 HTTP 헤더안에 데이터를 넣어서 보내지기 때문에 사용자는 페이지에서 페이지를 넘어갈 때 무슨 값이 넘어갔는지 알 수 없습니다 . 그래서 , 보통 GET 방식은 URL 주소로 컨텐츠를 접근하고자 할 때 쓰입니다 . 주로 게시판의 게시물 , 뉴스레터의 컨텐츠 , 쇼핑몰의 상품목록 등에 많이 쓰구요 . POST 방식은 로그인이나 회원가입 등에 쓰입니다 .
  • 18. 게시판 스토리보드 웹사이트 기획의 실무 번호 작성자 제 목 작성일 조회수 < 번호 > ②< 작성자 > ① < 게시판 제목 > <YYYY-MM-DD> < 조회수 > 답변했을 경우 최근 하루 게시물 제목 작성자 내용 ◀  [ 1 2 3 4 ] ▶ ① GET 방식 CONTENT 로 링크 ② 작성자 E-MAIL 링크 ③ 최대 10, 이상일 경우 , ◀ ▶ 활성화 ④ 작성일 내림차순 정렬 ⑤ 답변형 이미지 ⑥ 최근 게시물 (24 시간으로 설정 ) ⑦ ⑧ ⑨ PAGE KEY LIST TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSIO N ON (ID) PROGRAM ASP, JS 네비게이션 & 설명 ③ ④ NAVIGATION-PATH 홈 > 게시판 게시판 ⑤ ⑥ 반복구간10 번반복
  • 19. 게시판 스토리보드 웹사이트 기획의 실무 ① WRITE 로 링크 ② LIST 로 링크 ③ 답변형 WRITE 로 링크 ④ 수정형 WRITE 로 링크 ⑤ PASSWORD 로 링크 ⑥ 이전 레코드 ( 게시물 ) 로 이동 ⑦ 다음 레코드 ( 게시물 ) 로 이동 ⑧ ⑨ PAGE KEY CONTENT TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSIO N ON (ID) PROGRAM ASP, JS 네비게이션 & 설명 NAVIGATION-PATH 홈 > 게시판 > 게시물 제목 클릭 ( 컨텐츠 ) 제목 < 게시판 제목 > 작성일 <YYYY-MM-DD> < 번호 >번호 < 조회수 >조회수 < 내용 > 작성자 < 작성자 > 게시판 ① ② ③ ④< > ⑥⑦
  • 20. 게시판 스토리보드 웹사이트 기획의 실무 ① 입력된 데이터 submit (null 체크 ) ② 입력된 데이터를 지우고 작성자에 focus ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ PAGE KEY WRITE TITLE 실제 웹브라우저 타이틀에 들어갈 내용 SESSION ON (ID) PROGRAM ASP, JS 네비게이션 & 설명 NAVIGATION-PATH 홈 > 게시판 > 게시물 WRITE 클릭 게시판 글쓰기 작성자 E-MAIL 제 목 내 용 비밀번호 ① ②
  • 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> < 제목 > < 내용 > < 비밀번호 > ① ② ③ ④ ⑤ ⑥ ⑦ ⑧
  • 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> < 조회수 >
  • 23. 게시판 스토리보드 ( 설명 ) 웹사이트 기획의 실무 반복하는 방식은 표 (TABLE) 형태로 가능하며 여러가지 형태가 나올 수 있습니다 . 주의할 점은 반복하는 구간의 항목은 항상 같아야한다는 점입니다 . 세로 반복횟수명시 가로 반복횟수명시 가로 반복횟수명시 세로 반복횟수명시 쇼핑몰 상품전시에 많이 쓰이는 방식 게시판에 많이 쓰이는 방식
  • 24. 개념설명 웹사이트 기획의 실무 1. 데이타베이스에서 일정한 조건으로 검색 (select) 검색
  • 25. 개념설명 웹사이트 기획의 실무 2. 검색한 부분을 Record 단위로 저장 Record 단위로 각각을 저장 3. 웹브라우저에 Record 의 각 항목을 세로로 반복시켜 출력 title pwd email num writeday 상위 부분을 출력
  • 26. 마치면서 웹사이트 기획의 실무 의뢰자가 제안요청을 통하여 사이트를 의뢰하는 과정에서 대부분의 웹에이전시 업체들은 디자인적인 컬리티만을 중요시 합니다 . 이유는 제안요청을 한 의뢰자는 눈에 보이는 면만 관심 있게 보기 때문에 , 그것만으로도 계약이 체결되는 경우 가 많기 때문이죠 . 그래서 웹에이전시 업체들은 대부분 기술적인 마인드가 부족한 경우가 많습니다 . 하지만 , 인터넷이 점점 발달되면서 , 요즘 사이트를 의뢰자는 웹서버 하나만으로 모든 것을 감당할 수 있는 사이트를 제작을 의뢰하지는 않습니다 . UMS, 메신저 , 인터넷방송국 등 기술적인 스팩을 요구하는 의뢰가 점차 늘어나고 있지요 . 요즘 웹에이전시의 웹기획자 라면 단순한 디자인 , 사용자 위주의 네비게이션 설계 , 비즈니스 흐름만 파악만으로는 경쟁력이 없다고 생각합니다 . 웹에이전시 업체들이 시스템통합 (SI) 업체들과 제휴를 맺는 추세도 그러한 이유겠지요 . 웹기획자라면 프로젝트가 진행되면서 일정을 관리하게 되는데 , 웹기획자도 디자인이라면 디자인 , 개발이면 개발 프로젝트의 일부분을 자신이 직접 개발에 참여하는 것이 진정한 웹기획자가 않을까 싶습니다 .