본문 바로가기
반응형

전체 글132

웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서를 만들다 보면 웹문서용으로 사용할 '웹폰트(web fonts)'라는 것이 필요합니다. 물론 웹폰트를 적용하지 않더라도, Windows나 Mac 등의 시스템에서 사용하고 있는 기본 폰트를 통해 글자들이 보여질 수는 있겠지만, 디자인 의도가 적용된 폰트를 제대로 반영하지 못하게 됩니다. CSS에서 세팅한 대로 적절한 폰트가 웹문서에 적용이 되지 않는 경우에는, 폰트가 차지하는 크기가 달라서 문단의 배치 등에도 좋지 않은 영향을 받을 수도 있습니다. 이처럼 웹문서 작성 시에는 분위기와 잘 어울리는 폰트를 사용하는 게 중요할 텐데요, 구글 폰트를 사용하게 되면 이와 같은 이슈를 아주 간단하게 해결할 수 있기 때문에, 거의 전세계의 웹 제작자들이 사용하.. 2023. 1. 31.
[MBTI] ZOMBTI - 이상형 좀비 찾기 App 소개 [MBTI] ZOMBTI - 이상형 좀비 찾기 앱 소개 지난 설날 연휴에, 몰입할 수 있는 시간이 좀 남아서 예전에 만들어 두었던 , 게임 아닌 게임을 좀비 버전으로 업데이트해보았습니다. 이름은 좀비티아이(ZOMBTI)라고 지어봤습니다. 아재스러운 좀비 감성 어쩔... 이상형 남친 찾기, 여친 찾기 앱은 남자용, 여자용 각각 따로 만들었는데요, 따로 만들다 보니 소스 업데이트 하려면 꼭 2번씩 해야 하는 귀찮음이 발생하더라고요. 이번에는 각 잡고 앉아서 남자든 여자든 하나의 앱으로 분기해서 진행할 수 있도록 개선해 보았습니다. MBTI 검사를 이용하여, 좋아할 만한(?) 좀비와 매칭합니다. 사실 뭐 딱히 재미있다고는 할 수 없고, 그저 우리 집 얼라들이 코딩에 관심을 조금이라도 가지게 해 줬으면 좋겠다는.. 2023. 1. 30.
Carousel을 직접 만들어 보자 Part 2 - 성능 향상 하기 Carousel을 직접 만들어 보자 Part 2 이전 포스팅에서 부트스트랩을 이용하거나, 직접 바닐라 자바스트립트로 코딩을 해서 캐러셀을 만드는 방법을 알아보았습니다. Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자 carousel(캐러샐)은 '회전목마'라는 뜻입니다. 아마도 중학교 시절에 merry-go-round라는 단어로 배웠던 것 같습니다. 아무튼 웹사이트 상단 부분에서 비주얼 이미지를 크게 배치 kincoding.com 아마도 초보 딱지를 벗어난 분들은 나머지 기능에 대한 구현도 충분히 혼자 가능하겠지만, 우리집 아들 녀석들 같은 왕초짜들은 아마도 어려움을 .. 2023. 1. 29.
Carousel을 만들어 보자(Bootstrap을 이용 + 직접 만드는 방법) Carousel을 만들어 보자 carousel(캐러샐)은 '회전목마'라는 뜻입니다. 아마도 중학교 시절에 merry-go-round라는 단어로 배웠던 것 같습니다. 아무튼 웹사이트 상단 부분에서 비주얼 이미지를 크게 배치해서, 자동으로 슬라이드 되도록 만들어 놓는 것들을 '캐러샐'이라고 부릅니다. 캐러샐은 매우 많이 사용되는 UI이기도 한데요, 만드는 방법에 있어서는 까다로운 구석이 존재합니다. 왜냐하면, 정적인 HTML/CSS 물론이거니와 이를 동작하게 해주는 Javascript도 필요해지고, 게다가 화면 전환을 자연스럽게 연출하려면 CSS로 Animation을 적용해야 하기 때문입니다. 워드프레스의 경우, 상당한 수준의 캐러샐 라이브러리들은 별도의 유료상품으로 판매되기도 하니까요. 그만큼 홈페이지를 .. 2023. 1. 28.
포토샵을 이용한 Animated GIF 만들기(ft. 움짤) 포토샵을 이용한 Animated GiF 만들기 옛날 옛적 고리적에 움직이는 GIF 파일이 처음 등장했을 때 무척 센세이셔널 했던 시절이 문득 생각이 났습니다. 현재에는 Animated GIF 파일이라는 말 보다는, '움짤'이라는 표현으로 더 익숙하게 사용하는 것 같습니다. Animated GIF 파일을 사용할 일이 거의 없긴 한데요, 아주 가끔씩은 만들어 사용할 일이 생기기도 해서, 이 참에 그 방법을 정리해놓아 두려고 합니다. 포토샵도 버전 v5.0 무렵부터 접했던 것 같긴 한데 기억은 가물가물합니다. 세월이 많이 지나는 동안 포토샵 인터페이스도 툴도 기능도 참 많이 바뀌어 온 상태라서, 오래간만에 만져볼라면 무척 헷갈리더라구요.   STEP 01 : File > Scripts > Load Files .. 2023. 1. 27.
컬러셋 결정에 자신이 없다면? coolors.co ! colorhunt.co ! color.hailpixel.com ! 디자이너가 아니라서 컬러셋 결정에 자신이 없다면? 웹개발을 하다보면, 프로그래밍 코딩 개발 뿐 만이 아니라 기획도 중요하고, 디자인도 중요하다는 것을 결국 느끼게 되어 있습니다. 그래서 수 많은 IT 기업들이 업무들을 분화해서 전문 담당인력을 두고 있는 것이기도 합니다. 저의 경우에도 IT 직무의 시작은 '기획'으로 시작했고, 결과적으로는 PM으로 자리 잡았지만 나의 직무와 근접해 있는 디자인 영역이나, 프론트엔드 개발(예전에는 HTML 퍼블리싱) 그리고 백엔드 개발에 이르기까지 어느 정도는 직무적인 특성을 이해하는 것이 업무적으로 필요합니다. 그래야 협업이 순조로울 수 있거든요. 1인 혼자서 기획/디자인/개발 업무를 모두 진행한다고 가정할 때 정말 다양한 어려움에 직면하기도 하는데요, 논리적인 흐름이 .. 2023. 1. 26.
반응형

티스토리툴바