StardewValley 홈페이지 만들기

이정현·2021년 5월 13일
Databasehtmlphpweb
2
post-thumbnail

개발 배경

평소 steam의 Stardew Valley라는 게임을 즐겨 하여 주변 지인들에게 게임을 종종 소개해주곤 했다. 하지만 초반부터 발생하는 많은 콘텐츠로 게임을 시작하는 데 있어 진입장벽이 높으며, 게임 진행방식에 익숙해지면 반복되는 게임 방식으로 인해 이 게임을 추천하면 시작하는 사람이 잘 없을뿐더러 시작한다 하더라도 금방 질려 게임을 그만두는 모습을 자주 발견하였다.

처음 시작하는 사람이 어렵지 않게 게임에 적응해가는 여러 가지 방법, 질리지 않고 콘텐츠를 즐기며 게임을 플레이하는 방법 등을 유하고 싶다고 생각했다. 당시 공부중이던 apache 서버, MySQL, php 등을 사용하여 게임 소개, 게임 팁 공유, 멀티 플레이어 모집, 농장 자랑 등의 카테고리를 사용자에게 제공하는 페이지를 제작하고자 하였다.

개발 목표

스타듀 밸리를 플레이하는 농장주들이 게임을 하면서 알아낸 공략, 팁 등을 공유하고, 새로운 농장주(플레이어)를 영입을 위해 게임을 소개하고 홍보하는 웹 사이트를 개발한다. 신규 유저 영입을 위해 회원가입을 하지 않아도 게임 소개, 게시판 이용 방법 글은 읽을 수 있으며, 회원가입 수행 시, 게시글 작성 및 열람, 댓글 작성 등의 작업 수행 권한을 주도록 한다.


자신의 농장 자랑, 멀티 플레이어 모집, 공략 공유, 게임 소개, 자료 공유 등의 카테고리로 나눌 예정이며, 게임 소개를 제외한 나머지 카테고리는 회원 가입한 모두가 게시판에 글을 작성할 수 있다.

설계

UI Design

  1. 메인화면

    웹 사이트에 접속하게 되면 위의 그림과 같이 게임을 소개하는 페이지가 메인화면으로 게시된다. 일반 사용자들은 해당 카테고리의 소개 글을 열람만 할 수 있으며, 수정이나 삭제는 불가능하다.
    상단의 4개의 네비게이션을 클릭하면 해당 카테고리로 이동할 수 있으며, 타이틀 부분(‘농장주의 속닥속닥’)을 클릭하면 다시 메인화면인 게임 소개 페이지로 이동하도록 제작할 것이다.
    html 무료 템플릿을 다운로드하여 위의 화면에서 필요한 요소들만 간추려 사용할 예정이다.

  2. 게시판 조회(로그인X)

    게임 소개 외의 카테고리는 로그인이 완료된 상태여야 게시글 열람 및 작성이 가능하다. 만약 로그인이 완료된 상태가 아니라면 로그인을 해야 한다는 메시지를 띄우며, 이용자가 회원가입 또는 로그인을 수행할 수 있도록 버튼을 생성한다. 회원가입이 되어 있지 않다면 회원가입 버튼을 클릭하여 해당 작업을 수행하면 되고, 회원이라면 로그인 버튼을 클릭하여 로그인을 수행하면 된다. 로그인 수행 후, 가능한 작업은 게시글 작성, 게시글 삭제, 게시글 수정, 게시글 검색, 댓글 작성, 댓글 수정, 댓글 삭제이다.

  3. 게시판 조회(로그인O)

    로그인이 수행된 경우에는 작성된 게시글 목록을 볼 수 있다. 이때 게시글의 제목만 확인할 수 있도록 설계할 것이며, 해당 게시글의 제목을 클릭할 시, 게시글 내용을 볼 수 있도록 한다.
    오른쪽 상단에는 제목을 검색하여 게시글을 찾을 수 있는 검색 바가 존재하며, 그 아래에는 게시글을 작성할 수 있는 글쓰기 버튼이 존재한다. 검색의 경우 게시글 제목을 흰색 바에 입력하여 오른쪽 버튼을 클릭하면 입력한 제목의 게시글을 검색하게 되며, 글쓰기 버튼을 클릭하면 해당 카테고리에 게시글을 작성하는 폼이 나타나게 된다.

  4. 게시글 조회

    3에서의 게시글 목록 중 하나를 클릭하여 게시글 내용을 보여주는 화면이다.
    게시글의 경우 해당 유저가 작성한 글이 아니기 때문에 수정, 삭제 버튼이 나타나지 않는다. 게시글에 댓글을 작성하고 댓글 쓰기 버튼을 클릭하여 댓글을 등록한다. 해당 유저가 작성한 댓글이기 때문에 댓글에 대한 수정, 삭제 버튼이 나타남을 확인할 수 있다.

DB Conceptual Design


한 명의 사용자는 여러 개의 게시글을 작성할 수 있다. 또한, 게시글에는 댓글이 달릴 수 있는데 이 댓글에도 개수가 제한되지 않는다. 이때, 농장 자랑 카테고리에서는 이미지를 첨부할 수 있고, 다른 카테고리에서는 이미지 첨부가 불가능하니 이를 나누어 나타냈다.

DB Logical Design

  1. UserInfo : 회원 가입한 사용자의 정보를 저장하는 테이블이다.
    create table UserInfo (
	id int(20) not null auto_increment,
	userID varchar(30) not null,
	userPW  varchar(30) not null,
	NickName varchar(30) not null,
	userIMG mediumblob,
	
	PRIMARY KEY(id),
	INDEX(userID),
	INDEX(NickName)
) ENGINE=InnoDB default character set utf8 collate utf8_general_ci;
  2. UserWrite : 사용자가 작성한 게시글의 정보를 담는 테이블이다.
    create table UserWrite (
	writeid int(20) not null auto_increment,
	categoryNum int(4) not null,
	userindex int(20) not null,
	picture mediumblob,
	writeTitle text not null,
	writeMemo text not null,
	time timestamp default current_timestamp,
	
	PRIMARY KEY(writeid),
	FOREIGN KEY(userindex) references UserInfo(id) on delete cascade on update cascade
) ENGINE=InnoDB default character set utf8 collate utf8_general_ci;
  3. UserReply : 사용자가 게시글에 작성한 댓글에 대한 정보를 담는 테이블이다.
    create table UserReply (
	replyid int(20) not null auto_increment,
	writeid int(20) not null,
	userindex int(20) not null,
	categoryNum int (4) not null,
	replyMemo text not null,
	time timestamp default current_timestamp,
	
	PRIMARY KEY(replyid),
	FOREIGN KEY(writeid) references UserWrite(writeid) on delete cascade on update cascade,
	FOREIGN KEY(userindex) references UserInfo(id) on delete cascade on update cascade
) ENGINE=InnoDB default character set utf8 collate utf8_general_ci;

개발 내용

  • 타이틀(이미지&사이트 제목) : 클릭 시, 메인화면으로 이동한다. 이때 메인화면은 카테고리 ‘게임 소개’이다.

  • 카테고리 : 각 내비게이션을 클릭 시, 해당 페이지로 이동. 현재 열람 중인 카테고리에서 내비게이션 색상이 하얀색으로 강조되도록 하였다. 위 이미지를 보면 ‘게임 소개’ 카테고리가 하얀색으로 강조되어있다.

    1. 게임 소개 (메인화면) : 스타듀 밸리 게임을 소개하는 페이지이다. 회원이 아닌 사용자도 열람 가능하며, 각 게시판에 대한 사용 방법도 소개해준다.
    2. 오늘의 팁! : 일반 사용자들이 게임의 공략 글을 게시하고 열람할 수 있는 페이지이다. 로그인한 사용자라면 게시글 검색, 수정, 삭제, 작성, 댓글 작성, 수정, 삭제가 가능하며 이때 게시글을 작성할 땐 텍스트만 작성할 수 있다.
    3. 농장 자랑 : 일반 사용자들이 게임 내, 자신의 농장 사진을 스크린샷하여 게시할 수 있는 페이지이다. 로그인한 사용자라면 게시글 검색, 수정, 삭제, 작성, 댓글 작성, 수정, 삭제가 가능하며 이때 게시글을 작성할 땐 텍스트 작성, 이미지 첨부 모두 가능하다.
    4. 같이해요~ : 게임에는 멀티 플레이 기능이 있다. 일반 사용자들이 멀티 플레이를 함께할 유저를 모집하는 게시글을 올릴 수 있는 페이지이다. 로그인한 사용자라면 게시글 검색, 수정, 삭제, 작성, 댓글 작성, 수정, 삭제가 가능하며 이때 게시글을 작성할 땐 텍스트만 작성할 수 있다.

  • 메인화면

    웹 사이트에 접속하게 되면 위의 그림과 같이 게임을 소개하고, 게시판 이용방법을 알려주는 페이지가 메인화면으로 게시된다. 게임 소개 페이지의 글은 개발자가 작성하며, 일반 사용자들은 해당 카테고리의 소개 글을 열람만 할 수 있으며, 수정이나 삭제, 댓글 작업은 불가능하다.
    상단의 4개의 내비게이션을 클릭하면 해당 카테고리로 이동할 수 있으며, 타이틀 부분(‘농장주의 속닥속닥’ 또는 이미지)을 클릭하면 메인 페이지로 돌아오도록 제작하였다.
    html 무료 템플릿을 다운로드하여 위의 화면에서 필요한 요소들만 간추려 사용하였다.

    게임 소개 외의 카테고리는 로그인이 완료된 상태여야 게시글 열람 및 작성을 할 수 있다. 만약 로그인이 완료된 상태가 아니라면 로그인을 해야 한다는 메시지를 띄우며, 이용자가 회원가입 또는 로그인을 수행할 수 있도록 버튼을 보여준다. 회원가입이 돼 있지 않다면 회원가입 버튼을 클릭하여 해당 작업을 수행하면 되고, 회원이라면 로그인 버튼을 클릭하여 로그인을 수행하면 된다. 로그인 수행 후, 가능한 작업은 게시글 작성, 게시글 삭제, 게시글 수정, 게시글 검색, 댓글 작성, 댓글 수정, 댓글 삭제이다.


사용자는 웹 사이트에서 회원가입, 로그인, 로그아웃, 게시글 작성, 게시글 검색, 게시글 수정, 게시글 삭제, 댓글 작성, 댓글 수정, 댓글 삭제, 게시글 및 댓글 열람을 수행할 수 있다. 로그인이 완료된 경우엔 게임 소개, 오늘의 팁, 농장 자랑, 같이 해요 모든 카테고리에서의 위와 같은 작업을 수행할 수 있다. 만약 로그인 상태가 아니라면, 게임 소개 카테고리에서의 열람만 허용된다. 게임 소개를 제외한 다른 내비게이션 클릭 시, 로그인 필요 문구가 나타남을 확인할 수 있으며, 회원가입을 진행할지 로그인을 수행할지 버튼으로 선택할 수 있게 된다.
데이터베이스는 사용자의 회원가입, 게시글 작성, 게시글 수정, 게시글 검색과 같은 데이터에서의 수정이 일어났을 때, PHP를 사용하여 데이터베이스에 접근하여 데이터의 추가, 수정, 삭제를 수행하게 된다.

실행화면 및 코드

  1. 회원가입
    회원가입 버튼을 눌렀을 때, 나타나는 화면이다. ID, PW, PW 확인, 닉네임, 프로필 사진을 입력하는 항목이 있으며, 5가지 항목을 모두 입력 후, 하단의 회원가입 버튼을 클릭하면 회원가입을 진행한다.
    폼을 전부 채우지 않았을 때 뜨는 메시지이다.
    이미 사용 중인 아이디를 입력했을 때 뜨는 메시지이다.
    비밀번호와 비밀번호 확인 문자가 동일하지 않을 때 뜨는 메시지이다.
    이미 사용 중인 닉네임을 입력했을 때 뜨는 메시지이다.
    위의 에러 조건이 발생하지 않도록 정보를 입력하였고, 회원가입이 정상적으로 이루어졌을 때 출력되는 화면이다.
    UserInfo 테이블에 가입한 정보가 정상적으로 저장되었다.

  2. 로그인
    로그인 버튼을 눌렀을 때, 나타나는 화면이다. 아이디와 패스워드를 입력할 수 있는 텍스트 필드가 주어지고 하단의 로그인 버튼을 누르면 로그인을 진행한다.
    폼을 모두 채우지 않고 로그인을 수행했을 때 출력되는 메시지이다.
    아이디와 비밀번호를 입력했으나 데이터베이스의 정보와 일치하지 않을 때 출력되는 메시지이다.
    아이디와 비밀번호를 올바르게 입력하여 로그인에 성공했을 때, 출력되는 화면이다. 메인화면의 타이틀 아래 텍스트가 로그인 상태로 변경되었음을 확인할 수 있다.

  3. 로그아웃
    로그아웃 버튼을 클릭하면 로그아웃이 수행되며 위와 같은 메시지가 출력된다.
    로그아웃 수행 후, 메인화면으로 이동하고 위 사진을 보면 알 수 있듯이 로그인, 회원가입을 수행할 수 있는 버튼이 타이틀 하단에 출력된다.


  4. 게임소개(메인화면)
    왼쪽의 사진은 로그인을 수행하지 않았을 때의 메인화면, 오른쪽은 로그인을 수행했을 때 메인화면이다. 로그인 상태에 따라 버튼이 다르게 출력됨을 확인할 수 있다.


  5. 게시글 작성
    오늘의 팁 카테고리에선 아직 게시글이 존재하지 않아 게시글이 없다는 메시지가 출력된다. 이때 상단의 글쓰기 버튼을 클릭하면 글쓰기 폼이 열리게 된다.
    글쓰기 폼은 위와 같이 제목, 내용을 입력할 수 있도록 구성되었다. 이때 농장 자랑 카테고리에서 글쓰기를 클릭하면 이미지를 첨부할 수 있는 폼이 나타난다. 제목을 입력하는 텍스트 필드 상단에서 현재 글을 작성하는 카테고리가 어딘지 확인할 수 있으며, 하단의 글쓰기 버튼을 클릭하면 글쓰기를 수행한다.

    위와 같이 폼을 작성하고 글쓰기 버튼을 클릭하면 게시글이 정상 등록됐다는 메시지가 출력되고 메인화면으로 돌아가게 된다.
    오늘의 팁! 카테고리에 들어가면 위와 같이 작성한 게시글 제목, 작성자, 작성자 프로필 사진, 작성 날짜가 출력됨을 확인할 수 있다. 게시글의 제목을 클릭하면 게시글의 내용을 볼 수 있다.
    게시글 제목을 클릭했을 때, 게시글의 내용을 확인할 수 있으며 자신이 작성한 글이기 때문에 수정, 삭제 버튼이 나타난다. 하단에 이전으로 버튼을 클릭하면 이전 게시글 리스트를 출력해주는 화면으로 돌아가고, 댓글 폼을 작성하여 댓글 등록을 클릭하면 댓글을 등록할 수 있다.
    데이터베이스에 게시글 데이터가 정상적으로 들어감을 확인할 수 있다.
    폼을 모두 채우지 않고 글쓰기 버튼을 클릭했다면 폼을 채우라는 메시지가 출력되도록 하였다.
    이미지를 첨부할 때는 위와 같이 출력된다.


  6. 게시글 수정
    왼쪽은 자신이 작성한 게시글이라서 수정, 삭제 버튼이 생성되며, 오른쪽은 자신이 작성한 게시글이 아니므로 수정, 삭제 버튼이 생성되지 않음을 확인할 수 있다. 수정 버튼을 클릭하면 해당 게시글에 대한 수정이 가능하다.
    수정 버튼을 클릭하면 수정 폼이 나타나며, 기존에 작성한 내용이 텍스트 필드에 채워져 있다. 필드 값을 수정하고 수정 버튼을 클릭하면 게시글 수정이 가능하다.
    게시글 수정이 완료되면 출력되는 메시지이다.
    수정한 게시글을 출력하는 화면이다. 제목과 내용이 정상적으로 수정됨을 확인할 수 있다.
    데이터베이스에서도 데이터가 정상 수정되었다.


  7. 게시글 삭제
    자신이 작성한 게시글에서 삭제 버튼을 클릭하면 게시글이 삭제됐다는 메시지가 출력된다.
    게시글 리스트를 확인하면, 삭제한 게시글이 출력되지 않음을 확인할 수 있다.

    UserWrite 테이블 내에서 데이터가 정상 삭제되었다.


  8. 게시글 검색
    위에서 삭제한 게시글을 다시 작성한 후, 게시글 리스트를 출력한 화면이다. “세바스찬 호감도 공략”이라는 게시글을 검색하는 작업을 수행할 것이다. 게시글 리스트와 내비게이션 사이에 있는 검색 텍스트 필드에 “세바스찬”을 입력하고 검색 버튼을 클릭하면 입력한 제목에 대해 검색을 수행한다.
    세바스찬 입력 후 검색 버튼을 눌렀을 때, 입력 텍스트가 타이틀에 포함된 게시글만 출력되는 것을 확인할 수 있다. 만약 ‘세바스찬’이라는 단어가 타이틀에 포함된 게시글이 3개라면 검색 후, 3개의 게시글이 출력된다. 또한, 위의 경우 ‘오늘의 팁!’ 카테고리에서 검색을 수행하였는데 ‘농장 자랑’, ‘같이 해요~’ 카테고리에서 ‘세바스찬’ 단어가 타이틀에 들어간 게시글이 있다 하더라도 카테고리가 다르므로 출력되지 않는다. 즉, 검색어를 입력하는 카테고리 내의 게시글 리스트에서 검색을 수행한다.
    존재하지 않는 게시글을 입력한 경우 위의 사진과 같이 게시글이 존재하지 않는다는 문장을 확인할 수 있다.
    검색 텍스트 필드를 입력하지 않은 상태로 검색 버튼을 클릭하면 위와 같이 제목을 입력하라는 메시지가 출력된다.


  9. 댓글 작성
    게시글 하단을 보면 댓글을 등록할 수 있는 폼이 나타난다. 텍스트 필드에 댓글 내용을 입력하고 댓글 등록 버튼을 클릭하면 댓글 등록이 진행된다.
    데이터가 잘 전달 되어 댓글 등록이 완료되면 완료 문구를 메시지로 출력한다.
    확인 버튼을 누르면 이전에 보던 게시글 화면으로 돌아가게 된다.
    게시글 아래에 작성한 댓글이 정상적으로 등록됨을 확인할 수 있다. 자신이 작성한 댓글이기 때문에 수정, 삭제 버튼이 출력된다.
    데이터베이스의 UserReply 테이블 내에 댓글 데이터가 정상 저장되었다.
    텍스트 필드에 아무것도 작성하지 않고 댓글 등록 버튼을 클릭하면 댓글 폼을 채우라는 메시지가 출력된다.


  10. 댓글 수정
    ‘뚱이최고’ 작성자가 작성한 게시글에는 두 개의 댓글이 달려있다. 하나는 본인이 작성한 댓글이며, 다른 하나는 본인이 작성하지 않은 댓글이다. 위 사진을 보면 본인이 작성한 댓글에만 수정, 삭제 버튼이 나타남을 확인할 수 있다. 수정 버튼을 클릭하면 댓글을 수정할 수 있는 폼이 나타난다.
    댓글 옆에 수정 버튼을 눌렀을 시 나타나는 댓글 수정 폼이다. 댓글 내용 옆의 텍스트 필드에는 이전 자신이 작성하였던 댓글의 내용이 들어가 있고 하단에는 수정, 이전으로 버튼이 배치되어 있다. 댓글 내용을 수정 후, 수정 버튼을 클릭하면 댓글 수정이 수행되고, 이전으로 버튼을 클릭하면 이전에 보고 있던 게시글 페이지로 돌아갈 수 있다.
    댓글 내용을 수정하고 수정 버튼을 클릭 시, 댓글이 수정되었다는 메시지를 출력한다.
    확인 버튼을 누르고 돌아온 게시글 내용에서 수정된 댓글을 확인할 수 있다.
    데이터베이스의 UserReply 테이블에서 수정된 정보가 정상 저장되었다.


  11. 댓글 삭제
    위 사진 댓글의 삭제 버튼을 클릭하여 삭제를 진행한다.
    댓글이 삭제된 후, 댓글이 삭제되었다는 메시지를 출력한다.
    확인 버튼을 눌러 이전 게시글로 돌아오면, 삭제를 수행한 댓글이 리스트에 출력되지 않음을 확인할 수 있다.
    데이터베이스 UserReply 테이블에서 데이터가 정상 삭제되었다.


  12. 게시글 리스트 출력
    내비게이션을 클릭하고 해당 카테고리의 게시글 리스트가 출력되는 모습이다.
    게시글이 존재하지 않을 시, 위와 같이 게시글이 존재하지 않는다는 문구를 출력한다.


Github

자세한 소스코드를 보고 싶다면 StardewValley Hompage Github 을 확인.

profile
이정현
개발자 꿈나무
이전 포스트

StardewValley 공략 안드로이드 앱

다음 포스트

안드로이드에서 서버로 이미지 전송하기

0개의 댓글