조적조(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 = ..
게임 개발 일지: 모듈과 클래스 형식 만들기
End of content
No more pages to load