본문 바로가기

분류 전체보기

피그마(figma) 입문 - 생산성 끌어올리기 피그마를 제대로 활용하고 생산성을 끌어올릴 수 있는 3가지 방법을 알아보자. 1. 템플릿 활용 피그마 커뮤니티 탭에서 들어가보면 위와 같이 완성도 높은 템플릿들을 만나볼 수 있다. 이곳에 올라와있는 템플릿들은 프레임, 레이어 정리가 잘 되어있어 재활용성이 높고 레이어 관리를 어떻게 할지에 대한 감도 잡을 수 있다. 원하는 템플릿을 클릭하면 미리보기도 가능하고, 우측 상단의 Duplicate 버튼을 누르면 페이지 캔버스로 복제되어 바로 사용할 수 있다. 이 곳에서 원하는 템플릿을 찾지 못했다면 구글 검색 (검색어 예시: iOS figma template)을 통해서도 더욱 다양한 템플릿을 찾아볼 수 있다. 어마어마한 오픈소스 덕분에 무에서 유를 창조해내지 않아도 스타일의 UI디자인에 도전할 수 있다. 2. .. 더보기
UI디자인의 원리 - 아이콘(icon) 1. 간결성 간결하고 직관적인 형태로 명료하게 의미를 전달할 수 있어야 한다. 가독성을 최대화할 수 있도록 추상화한다. 복잡한 형태는 피한다. 2. 일관성 일관성 있는 디자인으로 통일감과 안정감을 줄 수 있어야 한다. 크기, 비례감, 스타일(fill or hollow) 등에 있어서 동일한 스타일을 유지한다. 선으로 된 아이콘일 경우, 선의 굵기, 선 끝처리 처리에 유의한다. 가독성을 위해서는 선의 두께를 2dp로 하는 것이 좋다. 선의 두께가 2dp 이하일 경우, 끝처리 반경은 1dp로 한다. System Icons - Icons and Images - iOS - Human Interface Guidelines - Apple Developer System Icons (iOS 12 and Earlier) .. 더보기
레이캐스팅 튜토리얼 5. Wolfenstein 3D 텍스처 1. 입문 레이캐스팅이 뭐야? (→이동) 2. 기초 아주 기본적인 원리 (→이동) 3. 중급 예제코드로 이해하는 레이캐스터 구현 (untextured) (→이동) 4. 고급 예제코드로 이해하는 레이캐스터 구현 (textured) (→이동) 5. 보충 Wolfenstein 3D 텍스처 Wolfenstein의 3D 텍스처 텍스처를 생성해서 사용하는 대신 이미지를 가져와 봅시다! 다음 8 개의 텍스처는 실제 Wolfenstein 3D에서 가져온 것으로, ID Software에 저작권이 있습니다. 여기에서 텍스처를 다운로드 할 수 있습니다. 텍스처 패턴을 생성하는 코드만 다음과 같이 바꿔주면 사용할 수 있습니다. 사용 시 텍스처 파일의 경로가 올바르게 설정되었는지 체크하세요. //generate some tex.. 더보기
레이캐스팅 튜토리얼 4. 예제코드로 이해하는 레이캐스터 구현 (textured) 1. 입문 레이캐스팅이 뭐야? (→이동) 2. 기초 아주 기본적인 원리 (→이동) 3. 중급 예제코드로 이해하는 레이캐스터 구현 (untextured) (→이동) 4. 고급 예제코드로 이해하는 레이캐스터 구현 (textured) 5. 보충 Wolfenstein 3D 텍스처 (→이동) 예제코드로 이해하는 레이캐스터 구현 (textured) 예제코드 전체보기 : raycaster_textured.cpp 텍스처를 표현한 레이캐스터 는 텍스처 없이 색상만 표현한 레이캐스터와 그 핵심은 거의 같습니다. 마지막 즈음에 텍스처와 관련된 계산을 좀 더해주는 것과 각 픽셀이 어떤 텍셀(texel, texture pixel) 값을 갖는지 결정해주기 위해 모든 픽셀을 통과하는 y방향 반복문 이 추가됩니다. 이번에는 verL.. 더보기
레이캐스팅 튜토리얼 3. 예제코드로 이해하는 레이캐스터 구현 (untextured) 1. 입문 레이캐스팅이 뭐야? (→이동) 2. 기초 아주 기본적인 원리 (→이동) 3. 중급 예제코드로 이해하는 레이캐스터 구현 (untextured) 4. 고급 예제코드로 이해하는 레이캐스터 구현 (textured) (→이동) 5. 보충 Wolfenstein 3D 텍스처 (→이동) 예제코드로 이해하는 레이캐스터 구현 (untextured) 예제코드 전체보기 : raycaster_flat.cpp 레이캐스터의 기본이 되는 텍스쳐 없이 색상만 표현한 레이캐스터 (Untextured Raycaster) 부터 시작하겠습니다. FPS 카운터 (fps : frames per second, 초당 프레임)도, 이동/회전을 위한 충돌감지 기능이 있는 입력키 (input key)도 다룹니다. #define mapWidth.. 더보기
레이캐스팅 튜토리얼 2. 아주 기본적인 원리 1. 입문 레이캐스팅이 뭐야? (→이동) 2. 기초 아주 기본적인 원리 3. 중급 예제코드로 이해하는 레이캐스터 구현 (untextured) (→이동) 4. 고급 예제코드로 이해하는 레이캐스터 구현 (textured) (→이동) 5. 보충 Wolfenstein 3D 텍스처 (→이동) 아주 기본적인 원리 레이캐스팅 의 기본개념은 다음과 같습니다. 2차원 정사각형 그리드로 된 맵 이 있습니다. 맵의 한 칸(square)은 0 또는 양수 값을 갖습니다. 0은 벽이 없음을 나타냅니다. 양수값은 벽이 있음을 나타내고, 특정 색상 또는 특정 질감을 나타냅니다. 화면의 모든 x값(수직선) 에 대해 플레이어 위치에서부터 시작하는 광선(Ray) 을 쏩니다. 이때 광선의 방향은 플레이어 가 바라보는 방향, 그리고 화면의 .. 더보기
레이캐스팅 튜토리얼 1. 레이캐스팅이 뭐야? 목차 1. 입문 레이캐스팅이 뭐야? 2. 기초 아주 기본적인 원리 (→이동) 3. 중급 예제코드로 이해하는 레이캐스터 구현 (untextured) (→이동) 4. 고급 예제코드로 이해하는 레이캐스터 구현 (textured) (→이동) 5. 보충 Wolfenstein 3D 텍스처 (→이동) 레이캐스팅이 뭐야? 레이캐스팅 은 2차원 맵에서 3차원의 원근감을 만드는 렌더링 기술 입니다. 레이캐스팅 은 스크린의 모든 수직선에 대해 계산(calculation)만 하면 되어서 속도가 빠릅니다. 컴퓨터가 지금보다 느려서 3D 엔진을 실시간으로 실행할 수 없던 과거에는 레이캐스팅 이 최초의 해결책이었습니다. 레이캐스팅 기술을 사용한 게임 중 가장 유명한 게임은 'Wolfenstein 3D'입니다. Wolfenstein.. 더보기
CSS - Transform, Transition, Animation, 3D 자바스크립트 없이 CSS 만으로 재밌는 효과를 줄 수 있는 4가지 효과를 알아보자. 1. CSS Transform '변형'을 뜻하는 Tranform은 CSS3에서 처음 등장했고 width, height 등을 조정하는 방법보다 성능이 좋다. 나머지 박스에 영향을 미치지 않고, 기준점이 중앙에 있다는 점이 특징이다. 중앙으로 설정되어있는 기준점은 transform-origin으로 쉽게 바꿀 수 있다. .box:hover { transform-origin: 0% 0%; /* 좌측 상단으로 기준점 변경하기 */ transform-origin: left top;/* (같은 효과) */ transform-origin: 100% 100%; /* 우측 하단으로 기준점 변경하기 */ transform-origin: ri.. 더보기

티스토리툴바