제목 : BONES CATCH
데스크탑 기준으로 만든 게임 사이트.
사이트 이름은 bones catch(뼈를 잡다)로
각자 자신의 그림과 문제를 포스팅하여, 서로 문제를 맞춰가며 진행하는
4가지 원시 부족간의 게임 입니다.
사이트
본스케치 바로가기
깃허브
깃허브 바로가기
제작계기
시작 전 이번 프로젝트는 next.js 프레임워크로 사이트를 만들고자 했습니다.
그렇게 무슨 사이트를 만들지 고민하던 저는 평소에 게임 사이트를 하나 정도 만들고 싶었지만,
게임 개발자를 목표로 하고 있지 않기 때문에 차후에 미뤄두고 시간을 내어 만들어 보려고 했습니다.
하지만 SW개발자로써 실무에서 사용하는 기술들인 CRUD가 전부 포함된 사이트를 게임 형식으로 만들면 되겠다고 생각하였습니다.
그렇게 프로젝트 구상을 하던 중 전에 구글링하면서 알게 된 그림판 구현 기술이 떠올랐습니다.
그림판과 CRUD, DB를 접목시킨 '게시판 형식의 스케치게임'을 떠올리게 되었고,
구체적이며 체계적으로 설계한 뒤 만들고자 했습니다.
제작환경
- 화면구성과 기능구현
( next, scss, next auth )
먼저 next.js 기반 베이스로 제작하였고, 로그인 구현은 mysql 테이블에서 받아 온 정보를 next auth를 통하여 쿠키로 관리하였습니다.
- DB
( mysql )
DB는 mysql에 테이블을 쌓았습니다.
- UI/UX 디자인
( photoshop, illustrator, figma, paint )
디자인은 포토샵을 기본으로 일러스트와 병행하며 작업하였으며, 그림판을 사용하여 투박한 느낌의 픽셀 디자인 작업도 하였습니다.
데스크탑 사용자들을 기준으로 잡고 설계했으며, 마우스 이벤트들과 클릭에 따른 드로우 이벤트등이 모바일로 환경 시 사용성이 떨어지기 때문에 반응형 작업은 하지 않았습니다.
디자인
먼저 사이트 구상 시 '스케치 웹 게임'이기에 '스케치'가 들어간 사이트 제목을 짓고 싶었습니다.
그렇게 스케치와 이어지는 단어를 찾던 중
뼈를 뜻하는 'BONES' 와 잡다의 'CATCH'를 이어붙여 BONES CATCH(뼈를 잡다) 라는 뜻에 본스케치의 제목이 탄생하였고,
원시시대 동물의 뼈나 날카로운 돌 등으로 동굴 벽이나 석판에 그림 기록을 남겼던걸 생각하여 원시시대로 컨셉을 잡고 디자인을 하였습니다.
또한 그림판 기능이 포함된 사이트기에 그림판 특유의 거칠고 투박한 픽셀 느낌을 주기위해 낮은 해상도의 픽셀로 오브젝트를 하나하나 그렸지만,
조금 올드하고 촌스러웠습니다. 그래서 저는 오브젝트의 역동감을 주기 위해 오브젝트를 모두 두 장씩 그려내어, 이미지가 균일한 간격으로 바뀌는 애니메이션을 주었고,
그렇게 역동감 있는 디자인이 완성 되었습니다.
원시시대 동굴 벽화 느낌의 테마
두 장씩 번갈아가며 움직이는 애니메이션
150개 가량의 이미지 파일
기능과 사이트 이용법
- 회원가입과 로그인
이 사이트는 회원만이 이용 가능하기에 초기 index페이지는 로그인으로 설정 되어 있습니다.
1. 회원가입
먼저 빈 input 태그에 모든 정보를 입력합니다.
중복된 이름, 또는 값이 없는 경우 아래에 입력과 선택을 요구하는 텍스트가 나타나게 됩니다.
모든 것들이 충족된 후 생성을 누르게 되면 MYSQL에 유저 테이블로 유저의 정보가 생성되며 로그인이 가능해진 상태가 됩니다.
( CRUD : CREATE )
2. 로그인
로그인 시 로그인 내역은 Next auth를 통하여 쿠키에서 관리하게 됩니다.
그렇기에 랜더링,리로드등이 발생하여도 로그인 정보가 남아있게 됩니다.
쿠키에 로그인 내역이 없을 시 페이지 이동이 불가능 하며, 파라미터 값으로 접근시에도 로그인 페이지인 index.js 로 이동하게 설정되어 있습니다.
( CRUD : READ )
일치하지 않는 정보 입력시 텍스트가 나타난다.
- 튜토리얼
회원가입 후 처음 접속하는 유저에겐 튜토리얼이 진행된다.
이는 회원가입 시 게임 내 화폐로 쓸 수 있는 조개의 갯수를 -1로 설정해 두어 갯수가 -1인 유저에 한하여 진행되는 것입니다.
튜토리얼을 끝내게되면 조개 20개와 선택한 부족의 특산품, 그리기 도구 하나를 얻게 됩니다.
( CRUD : UPDATE )
회원가입 시 선택한 부족의 족장이 튜토리얼을 진행한다.
튜토리얼이 끝나면 조개 갯수가 변경되며, 더 이상 튜토리얼이 보여지는 일이 없게된다.
- 그림 포스팅
그림을 기록하는 공간
1. 그리기 도구
좌측에 보이는 도구는 그림의 선 두께를 변경할 수 있는 툴 입니다.
상점에서 조개와 교환을 통해 얻을 수 있으며, 튜토리얼 완료 시 기본 한 개가 지급됩니다.
2. 파레트 설정
하단 돌 그릇에 마우스 커서를 올려놓으면 내가 가지고 있는 재료들이 표시됩니다.
초기에 내가 가지고 있는 재료들만을 불러와서 표시합니다.
재료는 그리기도구와 마찬가지로 상점에서 조개와 교환을 통해 얻을 수 있으며, 부족별로 고유 색상 재료가 하나 지급됩니다.
해당 재료들을 눌러 파레트에 색을 담아 사용합니다.
이 때 내가 가지고 있지 않은 색은 다크필터가 적용되어 눌러도 사용 할 수 없습니다.
3. 그림 그리기
그리기 도구와 색상 파레트 설정을 마쳤다면, 그림을 그려보겠습니다.
마우스 드래그를 이용하여 영역 안에서 그림을 그릴 수 있습니다.
이 때 사용자의 마우스 이벤트를 캐치하여 그림의 선 횟수를 변수에 저장합니다.
저장시킨 변수를 가지고 직전 그렸던 stroke만을 제거하는 되돌리기,
그렸던 모든 그림을 제거하는 전체 지우기 버튼도 사용 가능합니다.
4. 업로드
그림이 전부 그려졌다면, 아래에 보이는 박스에 그림에 제목을 입력한 뒤 확인을 누른다.
확인을 눌렀다면, 내가 그린 그림과 설정한 그림 제목을 확인 받는 팝업창이 나타나고 올리기를 하면 즉시 테이블에 정보가 생성되며, 메인 페이지로 이동한다.
이 때 그림은 DB공간에 blob형식으로 저장된다.
( CRUD : CREATE )
- 그림 맞추기
메인 페이지에선 모든 유저들의 그림이 보여진다.
바로가기를 눌러 문제를 맞출 수 있다.
이 때 작성자 본인이거나, 정답이 나온 게시판에는 더 이상 정답을 맞출 수 있는 댓글창이 생성되지 않는다.
그러니 다른 유저로 접속해 보겠습니다.
다른 아이디로 접속 하면 정답을 맞출 수 있는 댓글창이 활성화 되어 있고, 문제를 맞추면 얻을 수 있는 조개의 갯수와 정답을 맞출 수 있는 3번의 횟수가 표시됩니다.
이때 얻을 수 있는 조개의 갯수는 해당 게시물의 댓글 수로 측정합니다.
오답 시
조개 보상이 늘어나며, 댓글 횟수도 늘어났습니다.
정답 시
조개를 획득하며 게시물 상태가 기본 상태인 "미점령" 에서 나의 부족값으로 변하게 됩니다. ( CRUD : UPDATE )
점령 후 게시물 정답이 텍스트로 표시되고, 해당 부족의 마크가 찍힙니다.
점령 게시물의 바뀐 내부 모습입니다.
- 상점
그리기 도구와 염료를 살 수 있는 상점입니다.
그리기 도구
염료
이 때 내가 보유하고 있거나 구입한 물건들은 아래에 그림처럼 표시 됩니다.
나의 조개 갯수는 좌측 하단에 나와있으며 사고싶은 게시물에 커서를 위치하면 가격과 정보가 말풍선에 입력됩니다.
- 관리자 페이지
*해당 프로젝트에는 CRUD : DELETE 의 기능을 넣기 위해 관리자 페이지를 만들었습니다.
1. 접속
관리자는 사이트 이름인 "bonescatch"를 아이디와 비밀번호 입력칸에 작성하여 로그인 하면 접속이 가능합니다.
관리자는 모든 그리기 도구와 염료를 가지고 있습니다.
2. 신고 페이지
또한 관리자 전용 페이지가 따로 존재 하는데, 관리자로 로그인 후
상단 메뉴에 생겨난 신고 링크를 통해 이동 할 수 있습니다.
관리자 페이지에선 유저가 신고한 게시글들을 모아볼 수 있습니다.
3. 신고 관리
우측 버튼을 이용하여 게시물 삭제와 신고 내역을 삭제하는 버튼으로 CRUD : DELETE를 구현하였습니다.
4. 게시물 신고하기
관리자에게 신고를 보내려면 메인페이지에 신고하고 싶은 게시물 좌측 하단에 뿔피리 버튼을 눌러 신고합니다.
트러블 슈팅
- 새로고침 시 오류
DB에서 데이터를 요청하여 생성된 데이터들을 필요로하는 태그나 함수가 포함된 페이지에서 새로고침 시 에러가 나서 페이지가 작동이 안 되는 트러블이 있었다.
이는 랜더링 시 데이터를 받아올 때까지의 공백이 생기는데, 그 공백의 시간동안 없는 데이터들을 이용하여 함수를 실행하는 것에 대한 오류였다.
그래서 처음에는 setinterval 함수를 이용하여 일정 시간의 딜레이를 주고, 받아온 데이터를 처리하는 형식으로 진행하였지만,
요청하는 데이터의 양에 따른 처리속도로 모든 경우의 수를 수용할 수 있게 넉넉하게 딜레이를 정해놓은 탓에 작은 요청 하나에도 최대의 딜레이를 가지고 실행되니 참으로 답답한 사이트가 완성되었었다.
결국 답답함을 느껴 구글링하여 다른 사람들의 사례를 찾아본 결과 많은 사람들이 로딩을 따로 구성하는 것을 알았고, 삼항 연산자를 통해 데이터가 호출되는 동안 다른 레이아웃을 보여줌으로써 최적화하였다.
- CRUD AXIOS
이 프로젝트 내에서 DB프로세스에 대한 관리는 mysql모듈과 axios로 관리 하였다.
특히 db에 요청하는 axios에 경우 MyContext.js라는 전체 레이아웃 구조를 잡아주고 전역 변수를 관리하는 곳에서 이루어졌는데,
axios 요청 시 UPDATE인 axios.put이나, CREATE인 axios.post 와 달리 DELETE인 axios.delete는 매개변수를 전송 할 수 없었다.
async function dataPost(type, obj) {
if (type == "put") {
await axios.put("/api", obj);
}else if(type == "post"){
await axios.post("/api", obj);
}else if(type == "delete"){
await axios.delete("/api", obj);
//obj에 값을 가져오지 못함.
}
}이러한 문제는 구글링과 유튜브를 통해 axios.delete는 params의 값으로 주고받아야 한다는 것을 알게 되어 수정하고 해결하였다.
if(type == "delete"){
await axios.delete("/api",
{
params:{
id: obj
}
}
);
}프로젝트 후기
정말 만들고 싶던 게임 사이트이기 때문에 제작하는 모든 순간순간이 즐거웠습니다.
제작일지를 다시 한 번 읽어보니 게임 사이트 제작의 합리화와 타협점을 찾기 위해 CRUD에 중점을 두어 제작일지에 곳곳에 표시를 많이 한 것 같네요ㅎㅎ
그만큼 게임사이트 일지라도 유용하고 자주 사용하는 기술들이 많이 접목 되었다는걸 알려드리고 싶었습니다.
이 사이트는 저의 마지막 프로젝트로 제작 기간이 상당히 오래 걸린 프로젝트인데요,
그 중 5할은 디자인 하는 부분에서 시간을 많이 사용한 것 같습니다... 모든 요소들을 두 장씩 그려낼때 마다 이걸 내가 다 할 수 있을까..? 라는 생각이 들었지만,
제작 중간에 한 학우님이 이 프로젝트를 같이 꼭 해보고 싶다고 하여 개인 프로젝트에서 팀프로젝트가 되었고,
디자인과 개발은 거의 모든 것이 제작된 뒤였지만, 평소에 약하던 깃허브 협업에 관한 부분에 대해 새로운 팀원 분에게 배울 수 있었고,
제가 main 브런치를 맡아 요청받은 팀원분의 브런치와 머지를 하는등 협업에 대한 작업능력이 발전하였으며,
인원이 늘어났기 때문에, 디테일을 잡거나 자잘한 기능들도 추가 할 수 있었습니다.
그렇게 완성된 사이트를 보고나니 정말 뿌듯하고 잘 만들어 진 것 같아 기분이 좋습니다.
본스케치 많이 사랑해주세요.
인후님 감사합니다😊
후기 제작 23/04/11
