조적조(Masonry) 형식의 레이아웃은 핀터레스트(Pinterest)형식으로 폭이 같지만 높이가 다른 여러 객체를 쌓아나가는 형태의 레이아웃입니다. Masonry라는 자바스크립트 라이브러리를 사용해서 레이아웃을 정렬하는 방법을 많이 사용합니다. 여기서는 라이브러리를 사용하지 않고 직접 스크립트를 작성합니다. 기본 원리 작업을 시작하기 전에 배치할 리스트의 컨테이너와 아이템의 전제를 살펴봅니다. 상대적인 위치를 가진 컨테이너에 배치할 아이템은 절대 좌표를 사용합니다. 각 아이템은 폰트와 이미지를 모두 로드한 뒤에는 높이가 변하지 않습니다. 아이템 배치는 컨테이너의 너비를 벗어나면 안됩니다. 뷰포트의 크기가 변하면 아이템의 너비가 바뀔 수 있습니다. 나중에 스타일을 스크립트로 추가할 수도 있지만 스타일시트..
[TypeScript/JavaScript] 직접 벽돌쌓기 형식의 리스트 레이아웃 만들기
사이트맵은 검색엔진 등이 색인할 웹페이지 목록을 알려줍니다. 이전에 다뤘던 템플릿에 Jekyll SEO Tag 사용하기과 함께 검색엔진 친화를 통해 내 포트폴리오에 검색엔진을 통한 방문이 더욱 수월해지도록 하는 역할을 합니다. 깃허브 페이지가 제공하는 Jekyll Sitemap Generator 플러그인은 자동으로 sitemap.xml을 생성하여 일일히 페이지를 추가하거나 제거할때마다 편집하지 않아도 검색엔진이 최신 목록을 받아올 수 있도록 합니다. 사이트맵 모듈 사용 지킬 설정파일인 _config.yml에 다음 내용을 추가합니다. url: "페이지의 URL" plugins: - jekyll-sitemap 지킬 변환 엔진을 재실행 한 뒤 _site 디렉토리 내부에 robots.txt와 sitemap.xm..
포트폴리오를 위한 깃허브 페이지: 사이트맵과 SASS 사용
깃허브 페이지가 지공하는 플러그인 목록에는 jekyll-seo-tag이 있습니다. 이 플러그인은 검색엔진들이 쉡게 정보를 알아내어 검색결과에 반영할 수 있도록 {{ content }} {{ content }}는 마크다운 문서 등으로 제작한 페이지의 내용으로 변환하는 태그입니다. SEO 플러그인의 설정 지킬 설정 파일인 _config.yml에 플러그인 설정을 추가하면 지원하는 SEO 태그를 추가할 수 있습니다. 지원하는 설정은 플러그인의 기본 사용법과 [고급 사용법] 문서를 참고해서 착성할 수 있습니다. _config.yml을 수정하면 지킬 변환엔진을 재실행해야 페이지에 적용됩니다. title: soma0sd 깃허브 페이지 author: soma0sd email: soma0sd@gmail.com # jek..
포트폴리오를 위한 깃허브 페이지: 템플릿에 Jekyll SEO Tag 사용하기
이번에는 비주얼 스튜디오 코드(Visual Studio Code; VSCode)로 깃허브 페이지(GitHub Pages)를 개발하기 위한 기본 설정을 수행합니다. 최소실행에 필요한 파일을 몇 개 작성하고, 개발에 유용한 VSCode 확장을 설치합니다. 또한 간단한 단축키로 테스트를 수행할 수 있도록 테스크를 작성합니다. VSCode를 포함한 개발도구가 이미 설치되어 있다고 가정하고 시작합니다. 아직 준비가 되지 않았다면 로컬 테스트 환경 구정 포스트를 참고하여 도구를 설치한 뒤 진행합니다. 기본파일 생성 깃허브 페이지는 웹페이지 생성기로 지킬(Jekyll)을 사용합니다. 정적 웹 페이지를 생성하는 최소한의 파일은 _config.yml, index.md입니다. 이 파일들은 깃 명령으로 복제한 로컬 저장소 ..
포트폴리오를 위한 깃허브 페이지: VSCode 개발 설정
이 과정은 우분투 리눅스를 기준으로 작성되었습니다. 윈도우 환경에서 리눅스를 사용하려는 경우에는 아래 포스트를 참고하세요. 윈도우에서 로컬 테스트 환경을 구성하는 것은 상당히 귀찮고 불편합니다. 포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성 깃허브 페이지(GitHub Pages)는 몇 가지 플러그인을 포함한 지킬(Jekyll)을 사용하여 정적 웹페이지를 구성할 수 있습니다. 이 지킬은 루비(Ruby) 언어로 짜여진 템플릿 엔진이며, 템플릿을 구성하는 파일은 기존의 문서에 리퀴드(Liquid) 라는 템플릿 언어를 혼합하여 작성합니다. 환경 구성과정에서 설치한 모든 것을 다룰줄 알아야 할 필요는 없습니다. 특히 루비는 깃허브 페이지를 작성하면서 쓰이는 일이 없습니다. 우분투 업데이트 & 업그레이드..
포트폴리오를 위한 깃허브 페이지: 로컬 테스트 환경 구성
코스코드를 수정한 이력을 추적하고 관리하는 버전관리 시스템인 깃(git)의 저장소를 제공하는 깃허브(GitHub)는 저장소를 온라인으로 관리하고 저장소별로 커뮤니티 기능이나 문서화 기능을 제공하기도 합니다. 이번에 보유한 깃허브 저장소를 정리해서 외부에 공개해야 할 일이 생겼습니다. 깃허브는 깃허브 페이지(GitHub Pages)서비스를 무료로 제공합니다. 계정의 웹페이지나 공개저장소를 위한 웹페이지를 작성할 수 있습니다. 다만 데이터베이스를 사용할 수 없기 때문에 외부 서비스를 사용하지 않으면 로그인이나 댓글, 게시판, 추천 기능 같은 것은 구현할 수는 없습니다. WSL 설치하기 저는 윈도우 11 환경에서 비주얼 스튜디오 코드(VSCode)로 소스코드를 작성하고 있습니다. 그러나 이 환경 그대로 깃허브..
포트폴리오를 위한 깃허브 페이지: WSL 개발 환경 구성
저는 캐릭터, 몬스터, 공격, 효과, UI 등 그래픽 리소스를 에이스프라이트aseprite로 그리고 있습니다. 에이스프라이트(aseprite)는 현재 스팀에서 20,500 원에 판매중인 픽셀아트 및 픽셀 애니메이션을 제작할 수 있는 응용프로그램입니다. 그림 그리는 실력이 모자라 임시로 작업하고 있습니다. 나중에 협업이나 의뢰를 통해 필요한 그래픽 리소스만 별도로 작업해야 하는 상황에 대비해 코딩과 그래픽리소스 작업을 분리하기로 했습니다. 에셋 데이터 asset_data.json은 json 형식으로 작성한 에셋 데이터 파일입니다. 그림 파일의 각 조각에 이름을 부여하여 코딩으로 다룰 수 있도록 만드는 역할을 수행합니다. { "파일명": { "size": "그림 조각의 크기", "prefix": "타일 id..
게임 개발일지: 그래픽 리소스와 게임 데이터
오늘은 키 입력을 받아 플레이어 캐릭터가 이동하는 방법과 화면을 이동하는 방법을 결정합니다. 플레이어 이동 플레이어 이동은 즉시 일정속도로 움직이기보단 방향키를 누르는 동안 최대속도까지 점점 가속하는 방식입니다. 이 방식은 방향키를 짧게 누르면 조금만 움직이고 누르고 있는 동안에는 충분히 빠른 속도로 이동할 수 있어서 조작감을 향상합니다. $$ \begin{align} v_{new} &= v_{0} + a \\ x_{new} &= x_{0} + v_{new} \end{align} $$ 이전 위치 \( x_{0} \)와 이전 속도 \( v_{0} \), 가속도 \( a \)를 통해 새 위치 \( x_{new} \)를 구합니다. 화면 이동 게임은 플레이어 캐릭터가 게임화면의 중앙에 위치합니다. 플레이어가 이..
게임 개발일지: 플레이어 이동과 화면 이동
파이게임(pygame)을 사용하여 게임을 만드는 중에 작성하는 일지입니다. 게임 실행 시나리오 주요 클래스와 구조를 파악하기 위해 간단한 실행 시나리오를 작성합니다. 앱(App) 클래스 초기화: 파이게임 초기화, 게임 데이터와 옵션 초기화 장면(Scene) 클래스 초기화: 시작 메뉴 장면, 인게임 장면 등 앱(App) 클래스 랜더링 시작(mainloop()): 이벤트 수신, 장면 업데이트, 장면 랜더링 수행 대략 이런 모양이 될듯 합니다. 검은색 화살표는 런타임때 실행하는 순서, 빨강 점선은 데이터 교환을 의미합니다. App 클래스 틀 작성 class App: """앱 클래스""" running: bool = False def __init__(self): """ 앱 초기화""" App.running = ..
게임 개발 일지: 모듈과 클래스 형식 만들기
오늘부터 파이썬의 게임모듈 파이게임(pygame)을 사용하여 슬라임 서바이벌(가칭)이라는 게임을 개발합니다. Python 3.9.12 pygame 2.1.2 (SDL 2.0.18) 위는 기초 언어 환경입니다. 파이게임은 LGPL 라이선스를 사용하며 SDL2을 파이썬에서 사용할 수 있도록 만들고 몇 가지 기능이 추가되어있는 모듈입니다. 기초 개발환경은 파이썬 3.9의 최신 릴리즈와 파이게임 2.1.2를 사용합니다. mypy 0.942 black 22.3.0 pydocstyle 6.1.1 개발 편의성 도구입니다. 마이파이(mypy)는 소스코드 검사를 수행하며 디버그를 실행하기 전에 상당수의 오류를 미리 잡아줘서 편합니다. 블랙(black)은 파이썬 코드를 규격에 맞게 정리해주는 역할을 수행합니다. 여러 소스..
게임 개발 일지: 기본 개발 환경 구성
요즘은 코딩동아리가 없는 학교를 찾아보기 어려울 정도로 교과목 뿐만 아니라 동아리 수요도 늘었습니다. 하지만 그 인기만큼 준비없이 시작했다가 금방 망해버리는 동아리도 주로 코딩동아리입니다. 이번 시리즈는 개인 경험과 주변 선생님의 사례를 기반으로 처음 코딩 동아리를 시작하려고 하는 학생과 선생님들이 동아리를 빌드업하는데 참고할만한 이야기를 다룹니다. 이 시리즈에서 다루는 내용은 고등학교를 기준으로 합니다. 읽다가 궁금한 내용이 생기셨다면 덧글보다 아래 메일 주소와 제목을 참고하여 보내주시는 것이 더 빠르게 답변할 수 있습니다. 다만 글쓴이는 현재 학교가 아니라 기업에 소속되어 있어서 관련공문 해설이나 행사문의는 답변하기 곤란합니다. 이메일 주소: soma0sd@gmail.com 이메일 제목: [질문] 코..
코딩/프로그래밍 동아리 만들기: 활동별 분류
요즘은 코딩동아리가 없는 학교를 찾아보기 어려울 정도로 교과목 뿐만 아니라 동아리 수요도 늘었습니다. 하지만 그 인기만큼 준비없이 시작했다가 금방 망해버리는 동아리도 주로 코딩동아리입니다. 이번 시리즈는 개인 경험과 주변 선생님의 사례를 기반으로 처음 코딩 동아리를 시작하려고 하는 학생과 선생님들이 동아리를 빌드업하는데 참고할만한 이야기를 다룹니다. 이 시리즈에서 다루는 내용은 고등학교를 기준으로 합니다. 읽다가 궁금한 내용이 생기셨다면 덧글보다 아래 메일 주소와 제목을 참고하여 보내주시는 것이 더 빠르게 답변할 수 있습니다. 다만 글쓴이는 현재 학교가 아니라 기업에 소속되어 있어서 관련공문 해설이나 행사문의는 답변하기 곤란합니다. 이메일 주소: soma0sd@gmail.com 이메일 제목: [질문] 코..
코딩/프로그래밍 동아리 만들기: 동아리 빌드업
이전에는 키보드 조작으로 타일맵 이동코드를 추가했습니다. 이 방법은 키보들르 눌렀을 때 한 번만 이동하고 원하는 만큼 이동하려면 그만큼 여러번 눌러야 합니다. 게임 시스템에 따라 그방식이 좋은 경우도 있지만, 키보드를 누르고 있는동안 부드럽게 이동하는 것이 좋은 경우도 있을 것입니다. 오늘은 게임의 타일맵을 키보드의 WASD키를 누르고 있는 동안 이동하도록 만들고, 부드러운 이동을 위해 누르는 동안 타일맵의 이동이 가속하도록 만듭니다. 키보드 이벤트 Pygame의 키보드 입력을 매개변수로 받아 카메라의 속도를 변경하는 메서드를 작성합니다. 이 때, 무한정 가속하면 게임할 때 문제가 있을테니 [-10, 10]범위에서 가속하도록 합니다. 키보드에서 손을 떼면 가속과 속도를 무시하고 즉시 정지하도록 합니다. ..
Pygame: 키보드를 누르고 있으면 타일맵 이동을 가속
이전의 등축투영 타일의 좌표 포스트는 코드를 기준으로 설명했고 배치하는 방식에 대한 설명이 꽤나 불성실해서 보충하는 포스트를 작성하였습니다. 규칙을 파악하기 각각 \( w_{tile} \) 는 타일셋 이미지의 너비, \( h_{tile} \)는 타일셋 이미지의 높이, \( w_{grid} \)는 배치할 격자의 너비, \( h_{grid} \)는 배치할 격자의 높이입니다. 아이디어를 얻기 위해 그림을 보며 수식으로 정리해봅니다. $$ \begin{matrix} f_{x}(0, 0) = & 0 & f_{y}(0, 0) = & 0 \\ f_{x}(1, 0) = & - 0.5 w_{grid} & f_{y}(1, 0) = & 0.5 h_{grid} \\ f_{x}(0, 1) = & 0.5 w_{grid} & f_..
Pygame [보충]: 등축투영 타일의 좌표
End of content
No more pages to load