두 번의 낙방을 하면서 여러가지 고민에 빠졌습니다. 카카오톡 이모티콘 스튜디오에서는 낙방한 이유라도 알려주면 참 좋을텐데... 그럴 가치도 없는것인지 그냥 「당신은 우리와 함께 가실 수 없습니다」라는 짧은 내용의 이메일만을 툭 남겨놓고 사라졌지요. 제발 이유라도 알려주면 감사할텐데 말입니다. 그리하여 어쩔 수 없이 셀프 자가점검을 해봤습니다. 약 한 시간 정도 고민을 하고 내린 결론은 다음과 같습니다. 1. 캐릭터 개성이 없음 2. 움티가 아님 솔직히 저도 멈티(멈춰있는 이모티콘)보다는 움티(움직이는 이모티콘)를 좀 더 선호하는 편입니다. 그런데 작업량은 당연히 움티가 압도적으로 많습니다. 프레임 하나 하나를 손봐야 하니까요. 그게 싫어서 멈티로 도전을 하는 중인데 역시 진정한 합격을 희망한다면 멈티보단..
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 TOP 버튼이 만들어져 있습니다. 대부분의 브라우저에서는 이 TOP버튼을 누르면 페이지의 가장 위로 부드럽게 스크롤되며 이동됩니다. 바로 이것입니다. 부드럽게 스크롤이 이동되는 TOP버튼에는 아마 대부분 제이쿼리 스크립트가 심어져 있을 겁니다. 친효스킨만해도 아래의 코드가 스킨에 들어있습니다. $(".rgyTop").click(function () { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); 때문에 스크립트를 사용하려면 당연히 해당 스크립트(제이쿼리-jQuery) CND 주소를 안에 넣어줘야만 동작합니다...
친효스킨2 작업을 하면서 생각한게 아트북이니 엘범 컨샙이 물씬 느껴지면 좋겠다고 생각을 했습니다. 이제 커버 기능을 준비중인데 커버 스타일은 썸네일에 마우스를 올리면 뒤집히면서 제목과 내용, 글 작성 날짜 및 카테고리가 나왔으면 합니다. 그러기 위해서는 뭔가 3D같은 느낌을 주면 괜찮을 것 같았습니다. 그래서 만들었습니다. 3D 카드 느낌의 뒤집는 애니메이션 효과를 말입니다. 미리보기 See the Pen CSS3 : 3D Card by rgy0409 (@rgy0409) on CodePen. 카드에 마우스를 올려보세요. 그러면 Y축으로 180도 돌아가면서 뒤집히는 애니메이션 효과가 연출됩니다. 신기하죠? 놀라운건 자바스크립트를 전혀 사용하지 않고 오로지 CSS 만으로 구성되었다는 부분입니다. 따라서 스크..
이 방법은 눈속임입니다. 실제로 테두리가 회전하는것이 아닌, 백그라운드의 영역이 돌아가는 것입니다. 총 3단계의 레이어가 필요합니다. 백그라운드에는 overflow: hidden이 적용되고 중간이 회전하는 오브젝트이며 가장 최 상위 요소가 두번째의 백그라운드 요소를 가려서 실제로 테두리처럼 보이게 하는 효과인 것입니다. 말로는 설명이 어려우니까 바로 미리보기부터 살펴보시겠습니다. 미리보기 See the Pen CSS3 border rotate by rgy0409 (@rgy0409) on CodePen. 다양한 테두리가 div 박스를 회전하고 있습니다. 그러면 자세한 설명 들어갑니다. 원리 이해 먼저 그림으로 설명드리겠습니다. 총 3개의 요소가 필요합니다. 맨 아래는 전체 크기의 기준이 되는 요소가 사용됩..
티스토리에 이런 저런 연구를 진행하는 중입니다. 현재 친효스킨에는 본문 로딩 중에 제 트라이드 마크인 효자곰이 보이며 그 주변으로 무언가가 뱅글뱅글 돌아가는것을 확인할 수 있습니다. 본문의 모든 데이터를 로드하는동안 이런 애니메이션이 연출되는건데 이건 어떻게 적용시키는건지 알아보도록 합시다. HTML + Script 세팅하기 먼저 기본 뼈대가 되는 HTML과 애니메이션을 위한 스크립트를 티스토리 스킨 정보에 입력해 봅시다. HTML에 붙여넣기를 진행해야 합니다. 아래의 첨부파일을 다운받고 열어주시기 바랍니다. 열어보시면 점선을 기준으로 위에는 HTML과 스크립트 코트가, 아래에는 CSS 코드가 첨부되어 있습니다. 먼저 이 부분입니다. 해당 코드를 모두 복사합니다. 그리고 자신의 스킨 HTML 정보로 들어..
이전까지 움짤을 만드는 프로그램은 GifCam만을 사용해왔습니다. 그러다 우연히 이 프로그램을 발견하게 됩니다. 한 번 사용해보고 바로 이 프로그램으로 환승하게 되구요. 이유는 딱 하나였습니다. 프로그램이 너무 좋습니다. 성능이 탁월합니다. 지금까지 사용해본 GIF 애니메이션을 만드는 프로그램 중 이만한 유틸리티가 없었습니다. 지금은 컴퓨터 포맷 후 꼭 설치하는 필수 프로그램 중 하나입니다. 제작자님 블로그를 가봤는데 애석하게도 이후에는 더 이상 이 프로그램을 업그레이드를 하시지는 않는 것 같습니다. 현생이 바쁘신 것이겠지요. 올캡 다운로드 올캡을 다운로드 받는 방법은 보통 네이버 자료실에 공식적으로 올라와있지만 일부러 제작자님 블로그로 링크를 걸어두겠습니다. 왜냐하면 해당 페이지에 올캡 사용 방법이 꽤..
애프터이펙트로 불꽃놀이처럼 펑 터지는 효과를 만들어 보았습니다. 얼른 까먹기전에 글로 남겨놔야 합니다. 사람의 기억력이란 한계가 있으니까요. 본문에서 중요하게 짚고 넘어가야 하는 포인트는 두 가지 입니다. 1. Trim Path 2. Repeater 이것만 확실히 알고 넘어가면 이제 여러분들도 애프터이펙트로 불꽃을 터뜨릴 수 있습니다. 1. Position (위치) 변화까지 사용한 펑 터지는 효과 연출법 애프터이펙트 실행 후 새로운 컴포지션을 하나 만들어 줍니다. 해상도는 FHD 사이즈이고 프레임은 29.97이며 총 시간은 10초로 입력하고 배경색은 검정으로 지정했습니다. 다 되었으면 OK를 눌러줍니다. ['] 키를 눌러줍니다. 작은 따옴표 키 입니다. 누르시면 미리보기 화면에 세이프마진 라인이 활성화 ..
애펙에서 반복적인 애니메이션을 적용시킬때가 있습니다. 가령 사람의 경우는 걷기나 뛰기의 표현이 그것입니다. 날씨에서는 해가 쨍쨍 내리쬐는 모습이라던지, 비가 내리는 표현 등등도 여기에 해당이 됩니다. 그러면 일일히 프레임을 계속 반복해서 생성해줘야 할까요? 그렇게 해도 되지만 엄청 번거로운 작업이 될 겁니다. 그래서 어도비 개발진들은 "표현식" 이라는 기능을 애펙에 추가했습니다. 표현식은 쉽게 말해서 코딩 작업이고 이는 곧 명령어를 의미합니다. 하지만 자주 표현되는 명령어는 아예 애프터이펙트에서 기본적으로 추가가 되어 있습니다. 지금부터 알아볼 무한 반복 키프레임 표현식도 기본으로 들어있는 옵션입니다. 어떻게 사용하는지 알아봅시다. 빗방울이 떨어지는 애니메이션을 만들기 위해서 선을 작게 만들고 위치(Po..
애프터이펙트 소스를 만들고 미리보기에서는 이상이 없어서 최종 렌더링 작업을 하고나니까 뭔가 이상한 프레임 구간을 발견했습니다. 여기는 분명 직선으로 표현되어야 하는데 워낙 프레임이 빠르다보니 프로그램이 이를 제대로 인식하지 못하고 일부가 어긋나는 현상입니다. 키프레임을 수정해보고, 보간 속도도 변경해봐도 소용이 없었습니다. 혹시 애펙 버그인건가 (사실 따지고보면 버그 맞음) 싶어서 검색해봐도 뾰족한 방법은 나오지 않습니다. 쉐이프 레이어 크기 애니메이션 프레임 일부 구간 오류 바로 이 부분입니다. 분명 직선으로 되어야 하는데 애니메이션 속도가 빨라서 저렇게 일부 구간이 어긋납니다. 다음 프레임으로 넘어와도 그대로입니다. 얘도 이럽니다... 속상합니다. 그러면 문제를 해결해 봅시다. 쉐이프 스케일(크기) ..
CSS 애니메이션은 기본값이 반복 입니다. 무한 반복이죠. 하지만 애니메이션을 무한 루트가 아닌 딱 1회만 진행되도록 만들고 싶습니다. 혹시 스크립트를 써야 하는게 아닐까 속으로 내심 걱정이었는데 역시 CSS에도 이런 기능이 있었습니다. 참고로 마우스를 올렸을 때 애니메이션은 기본적으로 1회만 재생됩니다. 그밖의 스타일에 애니메이션을 마지막 상태로 만들고 싶을 때 이 방법을 사용하면 됩니다. animatiln-fill-mode 이 방법으로 에니메이션의 동작을 제어할 수 있습니다. 브라켓에서 살펴보니 다음의 네가지에 대한 옵션이 있었습니다. backwards : 애니메이션 처음 상태의 CSS 스타일을 유지함 forwards : 애니메이션 마지막 상태의 CSS 스타일을 유지함 (바로 원하던 것!) both ..
직업학교에서 열심히 배우고 있는 중 입니다. 개인적으로 배움에 있어서 가장 중요한건 "기초(Basic)" 라고 생각합니다. 건물을 지을때도 기초 공사가 잘 되어야 부실로 이어지지 않는 것 처럼 교육도 마찬가지라고 생각합니다. 그리고 이 부분은 운인데요, 선생님의 실력도 중요한 영역이지 않을까 싶습니다. 다행히 이번에도 좋은 선생님을 만나서 아주 훌륭한 실력을 갖출 수 있었습니다. 특히 기본이 중요하다고 말씀하시는 선생님의 말씀에 깊은 딥공감을 합니다. 누가 뭐래도 기본은 정말로 중요한 영역이지요. 기본을 정확히 이해를 해야 이것을 바탕으로 응용해서 뭐든 만들 수 있기 때문입니다. 아~ 내가 원하던게 리퀴드 애니메이션 이구나! 그렇습니다. 몰랐던 카테고리도 알게 되었습니다. 그동안 저는 단순히 VFX 혹은..
이번 시간에는 움직이는 배너를 만드는 방법에 대해 배웠습니다. CSS3의 Transition, Transform을 활용해서 움직이기 전 위치와 마우스를 hover 했을 때, 최종적 위치만 입력해두면 되는 간단한 방법입니다. 먼저 포토샵에서 대략적으로 위치를 한번 지정하시거나 임시로 한번 그려보세요. 마우스 올리기 전, 마우스 올린 후로 나뉘어 작업하시면 더 좋습니다. 그리고 배너에 들어가는 모든 이미지는 png 형식의 투명 이미지로 작업해 주시고 빈 공간은 포토샵의 Trim 기능을 써서 없애주시는게 핵심 입니다. 우선 여기에서 보여지게 될 움직이는 배너를 위해서 임시로 사진을 올려두도록 하겠습니다. 이렇게 세 개의 이미지를 사용할 것입니다. 각 이미지의 파일명은 표시해두었습니다. 그리고 html5, cs..
지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다. transition : property duration timeingfunction; 그리고 각 요소에 대한 설명은 아래와 같습니다. property : 애니메이션을 적용할 태그 요소를 지정duration : 애니메이션 재생 시간timeingfunction : 애니메이션 속도 옵션 그래서 실질적으로 이 부분에 대해서는 이론만으로는 이해하기가 어렵기 때문에 아래의 코드를 먼저 구성해봤습니다. See the Pen transition options by rgy0409 (@rgy0409) on CodeP..
이 방법은 우선 Fastboot 뿐만 아니라 Font Awnsome (폰트어썸)을 사용하는 블로그 혹은 HTML/CSS 홈페이지에서 모두 사용이 가능하다는 것을 말씀 드린다. 왜냐하면 폰트어썸 자체적으로 이런 회전기능이 있기 때문이다. 필자의 생각은 폰트어썸 뿐만 아니라 아마 이런 폰트어썸 스타일을 적용하는 모든 대상에 대해서 회전이 가능할 것 같다는 생각이다. 여기서는 우선 티스토리의 Fastboot 스킨에서만 한번 적용하는 방법을 알아보도록 하겠다. 피가되고 살이되는 블로그, 친절한효자손 취미생활!글, 사진 및 이미지 ▶ CopyLeft(C) 유길용#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다##공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서..
[2D 애니메이션] 인물사진에 애니메이션 효과를 주자! CrazyTalk7 Pro 지난번에 잠깐 이 프로그램에 대해서 언급한 바 있었죠?애니메이션 프로그램 중 하나이고요~ 이 프로그램의 특징은,실제 사진에 얼굴 부분에 영역을 지정해서 애니메이션 효과를 주는 것입니다. CrzayTalk7 Pro 라는 프로그램 입니다^^잘 기억해 주시구요~! 이건 샘플로 들어있는 애니메이션 인데요,고양이...ㅎㅎㅎ 상당히 재밌네요^^ 사진만 보면 잘 모르니까, 동영상으로 한번 보시지요^^ ㅎㅎㅎ 햄스터 귀엽네요^^그리고 보시면 아시겠지만, 일반 사진에 이런 효과를 주는 것이므로,배경은 되도록 아무것도 없는 것이 좋구요, 그리고 정면 사진이 가장 좋습니다^^ 그러면, 인물 사진중에는 가장 좋은건 증명사진이겠죠?? 다양한 샘플..