You will get there

아이디,비밀번호 입력창에 스크립트가 들어가면 그 스크립트를 로그인되는 과정중에 읽어들인뒤 실행을 할 수 있다. 해킹 방법 중 하나인데, 이걸 방지하기 위한 XSS 방지 를 적용해보려고 한다. https://cdnjs.com/libraries/dompurify dompurify - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersDOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's written in JavaScript and works in all modern browser..

화살표 함수란 무엇일까? 기존 함수 선언 방식인 function 키워드를 비교적 간결하게 만든 선언방식이다.js_popup.js 에서 예를들면 기존에 이렇게 함수 선언을 했다면,위와 같은 이미지로 하는게 화살표 함수이다. 화살표 함수의 장점은 간결하고 명확한 표현이다.단점은 new연산자 사용 불가능이다.(객체 생성 X) 다음은 로그인 창 구현이다. 먼저 기존의 메인html에서 검색하기 버튼 옆에 로그인 버튼 하나를 만들겠다.검색하기 아래에 다음과 같이 코드를 해주면위의 이미지처럼 상단에 로그인 버튼이 표시되는걸 볼 수 있다. 로그인 버튼을 눌렀을때, 새로운 창이 떠야하므로 popup.html을 만든것처럼 로그인폴더와 login.html을 생성해준다. 생성이 완료되었다면 부트스트랩에서 디자인을 가져올 것..

데이터 타입의 종류를 설명하자면 원시 , 참조 타입이 있다. 원시 타입은 쉽게 말해 하나의 정보를 저장하는 것이다.  let number =5;let str = "안녕" 이런 것처럼 말이다. 참조 타입은 두개 이상의 정보를 저장하는 것이다. 이제 실제로 작성해보겠다. 먼저 js_data.js 파일을 만들어준다.추가로 다음과 같은 코드를 짜고 메인 html에 스크립트를 불러주고 홈페이지 로딩후 개발자 모드로 콘솔에서 확인한다. 이렇게 콘솔에 보이는걸 볼 수 있다. 여기서 undefined 와 null의 차이가 있는데 undefined는 스크립트에서 자동으로 생성한 비어있는 값인데null은 직접 값을 부여한 것이다. 즉, 빈 칸을 그냥 빈 칸으로 둔 것과 빈 칸에 "없음"표시를 해둔 것이다. 다음은 참조 타..

팝업창에 시간을 보여주는 기능을 추가하겠다.js_popup.js 에 다음과 같은 코드를 작성한다. 시간을 보여주는 함수를 정의하고 여기서 Date()는 스크립트 안에 있는 시간을 확인할 수 있는 함수이다,아래 함수는 ID가 divClock인걸 divClock에 저장하는 것이다. 시간에 관한 함수들도 전부 스크립크에 내장되어있는 함수이다. 간단하게 해석하면 12시가 넘어가면 오후를 출력후 12시가 넘어간 시간에 -12를 해서 오후OO시로 출력하게하고 그게 아니면 오전으로 출력하게 만든다.  그리고 divClock.innerText = msg; 는 위의 결과값들을 divClock에 저장하는 것이다. setTimeout은 내장함수로 1000을 붙여 1초마다 갱신한다는 표시이다.   그리고 popup.html에..

몇가지 기능들을 구현할건데 이런 기능 처리는 대부분 .js파일로 구현해준다. 쉽게 말하면 핵심 로직을 구현하는 것이다.  어떤식으로 적용되는지 테스트를 해보겠다.그럼 js 폴더 - js_test.js 를 만들어보겠다.이렇게 만들었다면이렇게 코딩을 작성한다. 위의 코드를 설명하면 var는 변수 선언할때 사용하는 것이다. 이렇게 코드작성을 완료했어도 사이트에 바로 적용되는게 아니다. 메인 html에서 스크립트 파일을 불러줘야한다.  이걸 head 태그에 작성해준다. 그리고 사이트를 실행하고 F12를 눌러준다.그럼 위의 이미지처럼 개발자 창이 나올텐데 여기서 Sources를 들어가준다 그럼 이렇게 나오는데 이상하게 내가 작성한 js폴더와 파일이 보이지않는다. 왜그럴까? js파일의 이름이 잘못되었다. 이걸 다시..

제작사: 에드먼드 맥밀런발매일: 2011년9월29일장르: 로그라이크,액션,어드벤처 여기서 로그라이크란 최초의 로그라이크 게임인 'Rouge'에서 따온 이름이며 뜻은 던전 탐험, 턴 기반의 게임 플레이, 플레이어 캐릭터의 영구적 죽음등의 특징지어지는 롤플레잉 비디오 게임이란 뜻이다. 나 역시 처음으로 접해본 로그라이크 게임은 아이작의 번제 초기 버전으로 접했다. 아이작의 번제는 로그라이크류의 게임을 좀 해본 사람이라면 모를 수가 없는 게임이다. 인디 로그라이크 게임 시작의 시발점이라고 볼 수 있는 게임이다.아이작의 번제는 무슨 게임일까? 아이작의 번제는 구약성경에 나오는 아브라함의 아들인 이삭의 희생을 모티브로 한 내용의 게임이다. 아이작은 성경에 나온 얘기를 모티브로 하는만큼 천사,악마에 관한 방도 있고..

제작사: 넥슨발매일: 2003년4월29일장르: 2D 횡스크롤 MMORPG  02년생인 나에겐 추억의 게임을 꼽으라고 하면 무조건 나오는 게임인 메이플스토리이다. 한 때 겟앰프드와 같이 엄청 많이 했던 기억이 있다. 겟앰프드는 나만의 추억의 게임일 수도 있겠지만 메이플스토리는 게임을 했던 한국사람이라면 추억의게임이 아닐 수가 없는 게임이다. 오늘은 모두의 추억의 게임인 메이플스토리를 알아보자.  메이플스토리는 무슨 게임일까? 메이플스토리는 2003년에 나온 2D 횡스크롤 MMORPG이다. 여기서 MMORPG란 Massively Multiplayer Online Role-Playing Game의 줄임말이며 직역하면 대규모 다중 사용자 온라인 롤플레잉이라는 장르이다.위의 인게임 사진의 2D를 이용한 게임이다...

제작사: 벨브 코퍼레이션발매일: 2007년10월10일장르: 히어로 슈팅 게임  요즘 FPS 게임들을 보면 병과를 나눈 게임들을 흔히 볼 수 있다. 오버워치같은 게임들 말이다. 오늘은 처음으로 병과를 나누고 각 캐릭터별로 특성을 만든 1인칭 슈팅게임인 팀 포트리스2에대해 알아보자. 팀 포트리스는 무슨 게임일까?팀 포트리스,팀 포트리스 클래식, 팀 포트리스2의 순서대로 개발된 게임이다.1인칭 슈팅게임이다.게임방식으론 깃발 탈취전지점 점령구역 점령수레 밀기아레나등등인 클래식 모드로 각 모드에 맞게 임무를 완수하면 승리하는 조건을 가지고 있다.   팀 포트리스2는 왜 인기가 많았을까?팀 포트리스2가 인기가 많았던 이유는 다양하지만 그 중 3개에 집중되어 있다고 생각한다. 첫 번째로는 다양한 병과로된 첫 번째 슈..

제작사: 준인터발매일: 2003년5월16일장르: 난투형 액션  누구나 어릴 때 추억의 게임하나 있을 것이다. 누가 나에게 가장 재밌게 했던 게임이 무엇이냐고물어본다면 겟앰프드라고 1초의 고민도 없이 대답할 수 있다. 겟앰프드는 무슨 게임일까? 겟앰프드를 간단하게 알고 넘어가자면 장르인 난투형 액션과 걸맞게 정말 정신없는 전투가 가득한 게임이다.  위의 사진을 보면 겟앰프드는 3D 난투형 대전격투 게임인걸 확인할 수 있다. 발매당시 격투게임을 생각하면 철권, 동물철권,스트리트파이터 등 횡스크롤 격투게임이 주로 이루었지만 나에게 있어서 3D격투게임은 정말 충격적인 재미였다. 겟앰프드의 게임방식을 크게 얘기하자면 팀전,개인전이 존재한다.이 두개의 모드가 제일 인기가많다.팀전은 2:2부터 많으면 4:4까지 가능..

2025년 집을 나서면 꼭 보이는 PC방이있다. 어딜 가나 있으며 지금은 프렌차이즈까지 생겨서 운영되고 있는 곳도 많이보인다. 그런데 이 PC방붐이 단 한 게임으로 시작됐다면 믿겠는가? PC방 붐을 이르킨 스타크래프트를 알아보자. 제작사: 블리자드발매일: 1998년 3월 31일장르: RTS                                여기서 RTS란 Real Time Strategy 의 약자로 실시간 전략 게임이라는 뜻이다.스타크래프는 왜 인기가 많을까? 스타크래프트라는 게임을 간단하게 알고 넘어가자면 스타크래프는 스타크래프는 총 3개의 종족 프로토스,테란,저그로 원하는 종족 1개를 선택해 맵에 맞는 전략, 상대방 종족에 관한 정보를 수집한 뒤 그에 맞는 전략 설정을 통해 상대방의 건물을 모두..

피드백을 받은 후 최대한 시각화를 통해 생각하고자 하는걸 표현하고자 노력한 PPT완성본이다. 한 페이지씩 설명해가며 진행하고 마지막에 전체 후기를 남기며 마무리하겠다.  우리 홀로서기 조의 시작 페이지이다. 게임에 관한 분위기를 첫 장부터 표현하려고 노력했다. 게임 기획서의 래퍼런스를보고 목차구성을 재구성했다.첫 번째 기획의도의 페이지다. 시장분석의 예시가 필요한 것 같다. 다음은 게임 개요이다. 최대한 한눈에 들어오고 가독하기 좋게 만드려고 노력했고 표지를 이 페이지에도 넣으면서 게임의 분위기를 강조하고싶었다.타겟층 선정에 관한 내용의 관련 자료를 넣어서 선정이유를 설명했다. 다음은 시놉시스다. 크고 간단하게 설명해 바로 이해할만큼의 정보만 제공했다.다음은 게임 특징이다. 초안 스케치를 좀 더 구체적으..

이 게임은 일제강점기 시절을 배경으로 실제 사건과 가상의 사건, 실제 인물, 가상의 인물등을 넣어서 한국인이라는 누구나 교육받는 주제인 일제강점기를 직접 플레이하며 몰입할 수 있는 게임을 생각했다. 게임을 생각하면서 좀 많이 어두웠으면 하는 마음이 생겼다. 평소에 간접적으로 일제강점기를 체험하는 건 드라마,영화등이 있었다. 각시탈,미스터 선샤인,영화 암살 등등 내용자체는 어둡다고 생각했지만 분위기 자체는 어둡지 않다고 생각이되었다. 그래서 게임의 분위기도 엄청 어둡게 만들면 몰입감이 배가 될거라고 생각했다.  이 글의 주 내용은 중간회의까지의 내용이다.  게임 개요도 위의 사진과 같이 설정해놨지만 시각화가 필요해 보였다. 초안 스케치. 처음부터 2D픽셀 그래픽을 생각하고 기획한 게임이라 UI가 어떤 구조..

이 수업은 내꿈을 찾게해준 수업이였다. 팀플이 주로된 수업이였다.이 수업의 목표는 '게임 개발'이었다. 구현 단계까진 가지않고 기획까지만 해보는 수업이였다. 이 팀플에서 나는 조장을 맡았고 늦게합류한 1명을 포함한 총 6명으로 진행된 팀플이였다.  과정  왼쪽의 회의록은 첫 회의였다.처음으로 아이디어를 종합해본 우리 조는 '귀화산'이라는 로그라이크형식의 게임을 생각했다. 처음하는 기획이라 그런지 새로운 장르를 생각하기보단 기존에 있던 장르들을 래퍼런스해 컨셉만 신박하게 바꾸는 얘기를 하게되었다. 무당이라는 컨셉으로 스테이지들을 퇴마하며로그라이크 형식으로 플레이되는 게임이였다.                     이 기획은 사실 모방에 가까운 수준이였다. 가장 먼저 떠오른 래퍼런스는 던그리드 였는데 던그리..

구성요소의 우선 순위를 정했다면, 어느정도 게임 디자인에 틀이 잡혔다고 얘기할 수 있다. 이러한 틀이 잡혔다면 사람들이 게임을 플레이하게끔 하기 위한 재미요소를 선정해야한다. 아무리 다른 게임보다 특별한 특징을 잡아 대단한 차별점을 만들고,신박한 테마를 선정한 게임이라고해도 재미가 없으면 플레이어들에겐 선택되지 않는 게임일 뿐이다. 힘들게 만들어도 하지 않으면 의미가 없듯이 말이다. 그만큼 재미요소를 선정하는 건 정말로 중요한 일이다. 재미요소를 선정하기 위해선 게임 디자인에서 말하는 재미요소가 뭔지 알아야한다. 재미요소가 뭘까?게임 디자인에서 말하는 재미는 쉽게 말해서 과정이다. 여기서 주의해야할 점은 즐거움과 재미의 차이이다. 재미는 게임 결과와 상관없이 과정 자체에서 생기는 것이고,즐거움은 결과에 ..

테마와 차별점을 정하면 게임의 틀이 그려질 것이다. 이렇게 큰 틀을 정했다면 게임의 내부 구성요소를 정할차례이다. 구성요소는 무엇일까? 본래 구성요소의 정의는 사물을 이루고 있는 필수적인 성분이라는 의미를 가지고 있지만, 게임에서의 구성요소는 방대하고 복잡하다. 그렇기에 명확하게 OO이다. 라고 나온건 없지만 연구를 했던 분들의 얘기를 해보겠다. 3가지 게임 구성요소 이론들크게 게임 내부에서 본 게임의 구성요소,게임과 플레이어의 관계에서 본 게임의 구성요소,게임 외부에서 본 게임의 구성요소로 각 파트별로 연구한 사람들의 내용을 알려주겠다. 게임 내부에서 본 게임의 구성요소먼저 게임 내부에서 본 게임의 구성요소이다. 제시셀은 위의 4가지 구성요소로 분리했다.미적정서(Aesthetics) 위의 그림에서 볼 ..

게임에 있어서 테마 다음으로 중요한 건 특징,유형,차별점이라고 생각한다. 차별점은 무엇일까? 게임에서의 차별점의 정의는 특징 중에 다른 게임과 명확하게 구분되는 점이다.특징이란 특별히 눈에 띄는 부분이라고 할 수 있다. 개인적인 생각으로 차별점은 게임의 성공 가능성이라고 생각한다.  다양한 게임을 접해본 사람들이라면 한 번쯤 경험해봤을"아 이 게임 OO회사 게임이랑 비슷하네. 이 게임 할 시간에 OO회사 게임 한다."라는 경험이다. 나도 경험해 본적이 있다. 그만큼 게임에서 차별점이란 정말 중요한 역할을 한다. 개인적으로 차별점하면 떠오르는 게임이 하나 있는데 바로 에이펙스 레전드이다.에이펙스 레전드는 출시 1주일 후에 동시접속자를 무려 200만명이나 세운 기록이 있다. 한국에서는 인기가 그다지 많진 않..

원형 식탁을 만들며 설명하겠다.Cylinder을이렇게 세팅하겠다.  Shift + 이동으로 복사해주고 아래 먼저 수정하겠다. 윗면의 Polygon을 잡고 Shift + 크기조정 Shift + 이동으로 다음과 같은 모양을 만들어준다. 두께도 조절해준다. 이제 다리를 만들거다. Symmtry를 적용해준다.이미지에 보이는 곳을 Radial로 바꿔준다.그리고 Count를 4로 바꾼다.그럼 이렇게 기즈모가 접혀있는 형태처럼 보이는데,이 기즈모의 크기를 피자모양으로 나눠서 미러링한다고 생각하면 편하다. 그리고 Edge 하나를 잡고 Chamfer을 준다. !!!참고로 기즈모를 기준으로 잡아야 모두 적용된다 가운데 엣지는 Remove해주고 폴리곤을 잡아준다. 그리고 숨겨져있는 객체를 드러내고 Shift + 이동으로 크..

Symmetry를 이용한 식탁을 만들거다. 직접만들면서 설명해보겠다. 먼저 다음과 같은 Box를 만든다. 그리고 Edit poly로 밑변을 Polygon으로 잡고 작게 조절해준다. 여기서 각 모서리를 둥글게 만들건데 네 귀퉁이에 다 적용하려면 번거로울 수 있는데 이때 사용하는게 바로 Symmetry이다. Symmetry는 대칭으로 거울에 반사되듯이 생성및작업을 해준다. Symmetry를 적용하고 네 귀퉁이중 하나만 작업해도 모두 적용된다는 소리이다. 먼저 modifier List 에서 Symmetry를 찾아준다. 그리고 Y축까지 버튼을 눌러 키면 미러 기즈모가 보이며 어느쪽으로 대칭이 되는지 알 수 있다.  Edge를 통해 한 곳을잡으면 이렇게 저동으로 네 귀퉁이가 다 잡히는 걸 볼 수 있다.  여기서 ..

이번 과제는 본인이 원하는 걸 만드는 과제였다. 원래는 하나의 오브젝트정도만 만들면 됐지만 여러 오브젝트들을 만들어보고 싶었고 3D라는 장점을 최대한 살려서 만들고 싶은 마음에 위의 결과물을 만들었다. 간단하게 구역 별로 설명하겠다. 첫 번째 - 핸드폰  멕스를 처음 만져본 나는 여기서 애를 좀 먹었었다. 바로 핸드폰이였다. 모서리를 둥글게 만드는건 에딧 폴리에서 Edge - Chamfer 을 하면 돼서 쉬웠는데 문제는 뒤의 영역이였다. 카메라가 촬영하는 느낌을 내고싶은 나에겐 세그먼트로 나누고 그 영역을 Polygon - Bevel 을 하고 반대 부분은 Delet로 없앴다. 그리고 통해 Align을 통해 밑변도 평평하게 만들었었다. 근데 핸드폰 쪽에 폴리곤을 삭제해서 어떻게 채우지 하고 고민을 계속하다..

기획 의도: 간단하게 한 판씩 플레이하며, 목표도 가질 수 있는 점수 시스템을 도입해,계속해서 플레이를 할 수 있는 게임을 제작하는 게 기획의도이다. 사용한 에셋:https://assetstore.unity.com/packages/2d/textures-materials/sky/free-skyboxes-space-178953 (배경만 사용) https://assetstore.unity.com/packages/2d/textures-materials/dynamic-space-background-lite-104606(배경만 사용) 게임 제작 기능 구성: 사용한 컴포넌트 : Rigidbody2D,Box Collider2D,Animator 총 6개의 스크립트로 이루어져 각 스크립트의 주요 기능을 설명 GameSta..

3D 탱크 게임을 만들어 볼 예정이다.제작 순서는탱크 모형 만들기탱크 이동 처리포탄 처리목표물 만들기폭발 효과적 탱크적 탱크 따라오기스코어 표시화면 전환네트워크 게임순서대로 만들어보겠다. 일단 프로젝트 생성을 해준다. 기본적인 레이아웃 설명은 2D 만들기 여기에 적어놨으니 참고하면 좋다. 일단 Asset에 기본적인 자료를 정리할 폴더를 만들어준다. 그리고 이제 오브젝트를 만들어줄시간이다.본인만의 탱크 모형을 만들어도되지만 나는 수업에서 준 값들로 만들어 보겠다 순서대로 오브젝트,이름,속성,값 이다.CubePlanePosition x, y, z0, -0.5, 0  Scale x, y, z100, 0.1, 100Game ObjectTankPosition x, y, z0, 0, 0  Scale x, y, z1..

2D게임 만들기오늘은 2D게임을 만들어볼 것이다. 일단 유니티 허브를 실행해준다.실행 후 위의 이미지에 새 프로젝트를 클릭한다.  그럼 다음과 같은 화면이 나온다. 여기서 Universal 2D를 클릭해 원하는 이름으로 프로젝트 생성 클릭 후 로딩을 기다린다. 로딩이 됐다면 다음과 같은화면이 나온다.  이게 유니티 기본화면이다. 간단하게 설명해주겠다. 위의 이미지에 빨간 박스는 Hierarchy(계층)창으로 오브젝트 확인,생성 및 제거 등을 할 수 있고 모든 오브젝트들을 계층구조로 볼 수 있는 곳이다.  이번엔 Project 창이다. 이 창은 프로젝트에 관한 파일들이 들어있다.원하는 이미지나 색깔을 가져오거나 만들 수 있다. 3D 모델링 오브젝트, 이미지 파일, C# 파일, 사운드등 리소스할 수 있다. ..

유니티 다운로드 방법유니티 다운로드를 하려면 유니티를 먼저 다운하는 게 아니다. 유니티 허브 (Unity Hub)를 먼저 다운해야한다. Visual studio도 그렇고 요즘 프로그래밍관련한 프로그램이라면 허브가 없는 걸 찾기 힘들다. 유니티 허브 다운로드 주소 위의 주소로 들어가면 다음과 같은 화면이 나올거다. 여기서 윈도우면 빨간박스, 리눅스나 맥이면 아래의 안내를 따라가면 된다. 글쓴이는 윈도우기때문에 윈도우로 알려주겠다.  위의 빨간박스를 클릭하면이 프로그램이 설치가 되었을거다. 이 프로그램으로 허브를 다운해주면 된다. 허브다운은 빠르다. 허브를 다운하고 실행했다면 다음과 같은 화면이 나올 것이다. 여기서 유니티 계정이 없다면 생성,있다면 로그인하면된다. 그러면이러한 화면이 나오게된다. 여기서 라..

오늘은 큐(Queue)에 대해 알아볼 것이다. 큐를 한 문장으로 표현하자면 First In First Out이다. 즉, 선입선출이다.비유를 해주자면 음식점에 사람이 많으면 줄을서서 그 음식점에 들어가는 것이다. 그림으로 표현하면 위와같은 이미지로 생각하면 된다. 큐를 이해하려면 큐의 구조와 용어를 알아야한다. 먼저 용어는enQueue(인큐) - 데이터 삽입deQueue(데큐) - 데이터 추출front(머리) - 첫 번째 데이터rear(꼬리) - 마지막 데이터큐는 위의 이미지와 같은 구조를 가지고있다. 이 구조를 계속 생각하며 큐를 이해하려고하면 더욱 편하다.        먼저 가장 기본적인 큐의 구조는이미지와 같다. -1,0,1,2,3 은 인덱스 번호이다.enQueue삽입위의 이미지같은 구조에서 삽임을 ..

C++을 공부하는 글로 책을 통해 배운내용, 제 생각들과 실습 사진들을 올려서 정리할 생각입니다잘 부탁드립니다 :D책 -[C++ programming - 저자: 황기태] 의 책을 토대로 공부했습니다.   프로그래밍과 프로그래밍 언어는 무엇일까? 프로그래밍(programming)이란 컴퓨터가 처리할 일련의 작업을 묘사하는 것이고 이때 사용하는 컴퓨터 언어를 프로그래밍 언어(programmng language)라고 한다. 사람에게 무언가를 전달할때 언어를 사용하듯이 컴퓨터에게도 언어가 있다고 생각하면 편하다.C++의 역사는?C++를 기준으로 프로그래밍 언어의 진화 가정을 보자면 1950년대부터 어셈블리어의 한계를 극복한 고급 언어 들이 개발되기 시작했다. 여기서 어셈블리어란, 이진수만 사용하는 원시적인 언어..

나는 '게임 디자이너'라는 꿈을가진 24살이된 이관용이다. 이번 블로그를 운영할 기획의도는 '나의 경험과 지식을 추가한 일기'이다.이 블로그를 쓰기전에 나에대한 이야기부터 하고 넘어가야겠다. 나는 어쩌면 평범속에 나를 가둔 것이 아닐까.  나의 인생을 간단하게 소개하자면 너무 가난하지도,너무 부유한 집안도아닌 특별함속에 컸던 사람도 아니고 공부 실력도 평범,인간관계도 평범, 모든 것이 평범인 23년을 살아왔다. 그렇게 평범이란 나에게 떼어낼 수 없는 존재인 것처럼 살아왔다. 어쩌면 나는 이런 모습에 안도를 하며 살아왔던 것일지도 모른다. 남들보다 못하지도 잘하지도 않고 평범하게 지내왔던 나의 모습은 떨어질 곳은 멀리있고 올라갈 곳은 까마득해 보여 올라갈 엄두조차 나지않았기 때문인 것 같다. 그저 평범하게..