728x90 반응형 program139 디자인 210 기간한정 이벤트 - 쥐띠해 패키쥐 '똑똑 선물왔설' #2020 디자인 210에서 2020년 쥐띠해, 경자년을 맞이한 기념으로 '선물왔설'이벤트를 진행하면서 '쥐띠해 패키지'를 선보였습니다. 폰트 6종과 디자인 소스 2종이 포함되어 있는 패키지로 포함된 폰트는 '210 햄스터'와 '210 크림치즈'입니다. 디자인 소스는 '새해'와 관련된 캘리그래피 모음과 소풍과 관련된 귀여운 느낌이 물씬 풍기는 '피크닉 바구니'입니다. 폰트와 디자인 소스 둘 다 귀여운 느낌을 가지고 있어 팬시 계열에 어울릴 것 같은 폰트로 보입니다. 팬시 계열의 폰트가 대부분 그렇듯이 손에 익은 펜으로 써 내려간 듯 자연스러운 글줄과 대체적으로 부드러운 인상을 가지고 있습니다. 210 햄스터 210 햄스터는 Bold, Regular, Light의 3개의 패밀리로 구성되어 있습니다. 개인적.. 2020. 1. 31. Gridsome과 Git Action으로 GitHub Pages에 배포하기 #2012 놀면 뭐하나.. 우선 호스팅은 당연히 GitHub를 사용 중이고요.. Vue를 기반으로 한 Gridsome을 사용하고 Git Action을 이용해서 GitHub Pages에 배포하는 과정을 공부해 봤습니다. Action은 이전에 GitLab CI를 다루어 봤던 게 나름 도움이 되었던 것 같습니다. 가이드도 보고 구글 선생을 엄청 뒤져가면서 작업했었습니다. 의욕만 앞서서 만들었던 아주 가끔, 가뭄에 콩 나듯이 갱신하는 Sapjil이라는 블로그가 있습니다. 계약서 문제로 프로젝트에서 나오고 나니 집에서 할 일이 없어 일도 찾을 겸 그 사이에 뭔가 해보고 싶어서 기존에 사용하던 GitHub Pages를 수정하는 작업을 했습니다. Gridsome을 Git Action으로 GitHub Pages에 배포.. 2020. 1. 16. 디자인 210 서포터즈 1기 당첨 #1981 큰 기대 없이 지원했던 디자인 210 서포터즈 1기에 당첨되었다는 소식을 전해 들었습니다. 음? 진짜? 헐. 앞으로 1년간 폰트 큐브에서 제공되는 폰트를 큰 제한 없이 사용 가능한 조건으로 운영된다고 합니다. 이제는 더 이상 디자인 업무를 주 업무로 하지 않는 입장이지만 디자인에 발을 담그고 있었던 만큼 무료 폰트나 사진 등은 지금도 버릇처럼 모으고 있는데요 얼마 전에 있었던 디자인 210의 서포터즈 모집 공고를 보고 재미있을 것 같아 지원하곤 잊어버리고 있었는데 당첨이라는 연락을 받고 놀랐습니다. 210 서포터즈로서 앞으로 어떤 활동을 할지는 모르겠지만 기대 반 걱정 반입니다. 사명감에 불타오르는 나이는 살짝 지난듯하여.. 일단 853종 278 타입에 달하는 폰트를 폰트 라이선스의 걱정 없이.. 2019. 12. 3. Affinity 블랙 프라이데이 30% 세일 #1980 최근 Adobe의 Photoshop, Illustrator의 대체 프로그램 중 가장 인기가 있는 Affinity에서 BLACK FRIDAY 세일로 30% 세일을 하고 있습니다. 이전에 가지고 있던 CS6가 정품인증을 받지 못하는 사건이 발생하고부터는 집에서 작업 시에는 Affinity를 사용하고 있는데 뭐, 딱히 아쉬운 점을 없습니다. 그저 긴 시간 동안 Adobe계열의 프로그램에 익숙해져 있다 보니 단축키나 메뉴의 위치 등에서 약간의 어려움이 있긴 하지만 가성비를 고려한다면 이만한 대체 프로그램은 없을 것 같다는 체감을 하고 있습니다. 무엇보다 더 이상 디자인 업무로 밥벌이를 하지 않기 때문에 굳이 Adobe에 귀속될 필요는 없는 것이 가장 큰 이유입니다만. Affinity가 출시되었을 시점.. 2019. 11. 27. 지하철 정기권 운임계산 및 가격확인 - 서울교통공사 사이버 스테이션 #1974 새로 시작하는 프로젝트에 출근하기 위해 뚜벅이인 저는 지하철 정기권 운임을 알아보기 위해 검색을 해 봤습니다. 근데.. 검색어 선정을 잘 못 한 것인지 잘 나오지가 않더군요. 검색을 하다 하다 경우 발견했습니다. 지하철 정기권 운임 계산으로 검색을 했지만 전혀 나오지가 않았던 겁니다. 보통 검색을 통해 나오는 정보들이 몇 km에 얼마다 라는 식의 정보였는데 제가 원한 건 출발지 - 목적지간의 정기권 가격이었습니다. 사이버 스테이션이라고 아시나요? 전 이번에 처음 알았습니다. 제가 원하던 정보가 딱 나오는 곳을 찾아서 무척 다행이라 여겼습니다. 서울교통공사 사이버 스테이션 요일 선택 평일 토요일 공휴일 시 선택 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15.. 2019. 11. 3. 오픈소스로 제작된 질 좋은 맥용 무료 동영상 플레이어 - IINA #1971 IINA - The modern media player for macOS Plays anything. Powered by the open source media player mpv, IINA can play almost every media file you have. With the support of youtube-dl and our browser extensions, you can also play a variety of online streams in IINA via one click. iina.io 그동안은 맥에서 동영상을 보기 위해 Movist 아니면 VLC를 주로 사용했었는데 최근 IINA를 사용하기 시작한 이후로는 이 녀석만 사용하고 있었네요. 일단 가볍다는 느낌(?)이 들어서 좋.. 2019. 11. 1. 맥 백업기능을 조정해 주는 무료 앱 TimeMachineEditor #1970 프로젝트로 맥을 가지고 출근을 하게 되었습니다. 그동안은 맥을 사용하지 못하게 해서 회사에서 지원해주는 윈도를 가지고 작업하기도 했었는데요. 이번엔 항상 사용하고 있는 2012년도 MacBook Air를 가지고 일을 해보게 되었습니다. 아무래도 회사에 가지고 가서 업무를 보는 것이고, 기존의 개인 작업이나 여타 파일들을 포맷하고 나와야 하는 상황도 고려해야 하는 만큼 작업 시작하기 전에 백업을 해두려고 알아보다 결국 Time Machine만 한 것이 없을 것 같아 놀리고 있던 외장하드에 연결시키고 실행을 시켰습니다. 처음엔 상당히 시간을 잡아먹긴 하더군요. TimeMachineEditor TimeMachineEditor TimeMachineEditor is a software for macOS.. 2019. 10. 30. 창크기를 조정시켜주는 맥용 무료 앱 - Rectangle #1969 전 현재 Appstore에서 구입한 Magnet을 사용하고 있어서 딱히 사용할 일은 없지만, 아직 사용해 보지 않은 분이라면 무료로 사용해 볼 수 있는 Rectangle을 사용해 보시면 어떨까 싶어서 소개해 봅니다. Rectangle Rectangle Move and resize windows in macOS using keyboard shortcuts or snap areas rectangleapp.com 오픈소스로 제작되어 있습니다. Github에 소스까지 배포하고 있습니다. 프로그램을 다운로드한 뒤 앱을 애플리케이션 폴더에 추가시키면 1차적인 설치는 끝납니다. 설치 후에는 System Preferences의 Privacy에서 Rectangle을 체크해줘야 최종적인 설치가 마무리되었다고 할.. 2019. 10. 28. 접근성을 고려한 프런트엔드 UI 샘플 - Frend #1967 Frend(프랜드?) 발음은 잘 모르겠습니다만.. 접근성을 고려한 최신 프런트 엔드 구성요소입니다. 자바스크립트는 ES2015 모듈을 사용하고 있다고 합니다. 이 사이트는 많이들 사용하고 있는 Jekyll로 구성된 사이트네요. 사이트에 사용된 CSS는 BEM을 적용시켰다는 등등 여러 정보가 있지만, 이런 건 둘째치고 사이트에서 제공하고 있는 샘플들은 공부하기에 적당한 것 같습니다. 사이트 구조는 Frend에서 제공하는 샘플이 전부입니다. 각 샘플들의 페이지에서는 각 샘플에 대한 개요와 설치방법, 사용법, 옵션, 지원 브라우저 현황(데스크톱, 모바일 포함) 등에 대해서 설명해 주고 있는 구조를 가지고 있습니다. Frend — A collection of accessible, modern fron.. 2019. 10. 26. CSS animation 을 공부할때 참고하기 좋은 사이트 - animista #1966 갈수록 애니메이션이 중요해지고 있는 것 같습니다. 그 전에도 있었지만 아마도 구글이 머티리얼 디자인을 제시하기 시작하면서부터 화면의 구성이 심플해지는 추세가 급격히 불어나기 시작했고 서비스를 제공하는 측에서는 이렇게 심플해지고 정보성 위주로 화면이 바뀌기 시작하자 사용자를 조금이라도 끌여들이기 위한 수단으로 서비스에 조금이라도 모션을 적용시키기를 바라고 있는 것 같습니다. 특히 이 움직임은 금융권에서 많이 생기는 것 같다고 보입니다. 기본적인 UI 화면의 구성은 기본적으로 다음과 같습니다. 메인 메뉴 - 대분류 각 카테고리에 해당되는 모션의 종류 - 중분류 각 모션의 방향등의 상세 모음 - 소분류 상세 옵션 설정 및 실제 동작 확인 OPTIONS Options에는 애니메이션에 사용되는 시간설정.. 2019. 10. 24. 기억력 효과를 기대할 수 있는 무료 영문 폰트 - Sans Forgetica #1965 호주에 있는 RMIT 대학에서 만들어진 무료로 사용 가능한 폰트입니다. 이 폰트는 바람직한 어려움(Desirable Difficulties)이라는 인지심리학 분야의 이론을 적용한 폰트입니다. 이 이론은 편하게 얻은 정보보다 약간 노력을 들여서 얻은 정보가 좀 더 오래 기억된다는 이론이며, 이 폰트는 디지털화가 매일같이 발전되고 있는 시점에서 공부할 때 직접 손으로 쓰면서 연습하던 시대가 아닌 지금 시점에 어쩌면 필요한 폰트일지도 모르겠습니다. 힘들게(?) 손으로 쓰면서 익히는 것이 아닌, 키보드를 두드리면서 하면서도 비슷한 학습효과를 올릴 수 있는 방법을 찾던 중에 나오게 된 폰트입니다. Sans Forgetica라는 이름을 가지고 있으며 Helvetica를 기본으로 작업된 폰트입니다. 처음 .. 2019. 10. 22. RWD web site 제작에 필요한 각종 패턴 모음 - Responsive Patterns #1964 반응형 홈페이지 제작에 필요한 요소들을 스크랩해둔 곳입니다. 기본적으로 Codepen에서 적절한 샘플들을 취합해 두었는데 작업하기 전이나 작업하는 중간에 참고용으로 좋다고 생각됩니다. Responsive Web Design Patterns | This Is Responsive bradfrost.github.io 카테고리도 잘 나누어져 있기 때문에 참고용으로 유익하며 사용법은 간단해서 원하는 항목을 선택하면 Codepen사이트로 이동하게 됩니다. Category Layout Navigation Images Media/Data Forms Text Modules 사이트 사용에는 어려움이 없습니다. 그저 각각의 항목들을 클릭해서 샘플들을 확인해 보고 쓸만하다 싶으면 참고해서 자기 걸로 만들면 되는 거죠. 2019. 10. 20. 집중력을 높여주는 백색소음을 브라우저에서 - Noisli #1963 혹시 브라우저를 자주 열어 놓고 업무를 보시나요? 그리고 집중하기 위한 음악도 가끔씩 듣는 편인가요? 그럼 이런 서비스는 어떨까요? 굳이 회원가입 같은 걸 하지 않더라도 BGM으로 자연의 소리를 들어볼 수 있는 서비스입니다. Noisli - Improve Focus and Boost Productivity with Background Noise Noisli is a fantastic background noise and color generator for working and relaxing. Plus Text Editor for distraction-free writing and Markdown support. www.noisli.com 비, 천둥, 바람, 숲, 나무, 개울가, 바닷가, 물방.. 2019. 10. 18. browser list #1962 각 브라우저의 지원 상황에 대해 알아볼 수 있습니다. 사용되고 있는 데이터는 caniuse의 DB를 사용하고 있습니다. browserl.ist: A page to display compatible browsers from a browserslist string. A page to display compatible browsers from a browserslist string. browserl.ist 사이트에 접속하게 되면 검색창에 default가 적혀 있으며 모바일과 데스크탑 브라우저에서 사용되는 각종 브라우저의 버전과 셰어율을 표시해 주고 있습니다. 또한 페이지 하단에는 default 값을 사용하고 있는 Global 셰어율을 표시해줍니다. defaults last 1 version last.. 2019. 10. 16. 이미지를 텍스트로 변경하기 - Base64 Image Encoder #1961 JPG, PNG, GIF, WebP, SVG, BMP 등의 이미지를 Base64 형식의 문자 코드로 변환시켜주는 서비스로 가끔씩 사용하긴 하지만 유용한 서비스입니다. Base64 Image Encoder Optimize your images and convert them to base64 online. Drag & Drop your files, copy to clipboard with a click and use the result in HTML and CSS. www.base64-image.de Browser Support를 보시면 알겠지만, Base64의 브라우저 지원에 대한 걱정을 할 수준은 아닙니다. 상황에 따라 사용할지 말지를 정하면 되는데요. 개인적으로 사용하는 방식은 사용자가 등록.. 2019. 10. 14. 연습용으로 간편하게 json을 사용할 수 있는 서비스 - Myjson #1957 프로그램 연습을 하다보면 필수적으로 json을 사용한 예제를 접하게 되지만, 로컬에서는 이 기능이 잘 되질 않는 것을 경험하게 됩니다. 결국 FTP나 여기저기서 찔끔찔끔씩 공간을 잡아가면서 사용하게 되는데요. 아예 이런 용도로 사용 가능한 공간이 있습니다. Myjson이라는 서비스입니다. Myjson - About About Myjson is a simple JSON store for use in your client side web and/or mobile applications. If you've ever needed a quick place to store a configuration file or some data for your client side models, Myjson can .. 2019. 10. 10. AI가 만들어낸 저작권에 제한이 없는 100,000장의 얼굴 사진들 #1951 와우 이 프로젝트 끝내주네요. AI가 만들어내는 100,000명에 달하는 얼굴 사진들. 초상권 걱정없이 맘대로 사용할 수 있습니다. 100,000명이라.. 고르는데 시간은 걸리겠지만 입맛대로 고를 수 있겠네요. 100,000 AI-Generated Faces – Free to use! Explore our free resource of 100k high-quality faces, each entirely generated by AI. Use them in your projects, mockups, or wherever — all for just a link back to us! generated.photos 사용법은 페이지에 나와 있는 'Browse on Google Drive' 버튼으로 사진.. 2019. 9. 24. Affinty Designer에서 불러들이는 이미지가 뭉개져 보이나요? #1950 Adobe용 CS6를 잘 사용하고 있었는데 갑자기 불법 소프트웨어라는 안내가 뜨는 것을 확인했습니다. 띵~ 회사에 라이선스 문의를 해보니 불법으로 뜬다고 하네요. 아마존에서 정가보다 싸게 구매했던 거라 반신반의하면서 지냈었는데 역시나 6년 정도 쓰니 문제가 발생하는군요. CC는 과금 형태가 맘에 들지 않아서 출시 초기부터 Adobe의 대항마로 유명세를 탔었던 Affinty Designer와 Photo를 구매해 두었던 것을 다시 사용하기 시작했습니다. PSD도 문제없이 열리고 다 좋은데 다년간 Adobe의 UI에 익숙해져 있다 보니 Affinty에 익숙해지는 데는 상당한 시간이 필요할 것 같습니다. 앱스토어에서 구매한 Mac용 라이선스는 가지고 있지만 잠시 작업을 위해 회사에서는 Windows를.. 2019. 9. 23. Adobe가 공식으로 지원하는 Adobe XD용 Semantic UI Kit를 사용해 보세요! #1948 최근의 프로젝트에서는 대체적으로 Photoshop보다 XD 파일을 사용하는 추세로 변경되고 있는 느낌입니다. 프로젝트에 디자이너가 있다면 좋겠지만, 그렇지 않은 프로젝트도 상당수 있다 보니 무료로 제공되는 UI Kit을 사용하는 경우도 많아진 것이 사실입니다. Semantic UI를 기반으로 한 80종류 이상의 컴포넌트가 수록되어 있습니다. Semantic UI Kit은 어도비의 공식 블로그에서도 자세하게 다루고 있습니다. Semantic UI Kit for XD: Icons & Templates for Semantic Design Build a custom design system with this kit inspired by Semantic UI. Start designing at scal.. 2019. 9. 20. 부트스트랩을 손쉽게 사용하기 위한 Bootstrap Cheat Sheet #1947 Bootstrap은 어느 정도로 사용하고 있으신가요? 초기보다 기능도 다양해지고 클래스도 많아진 것 같은데요. 실제로 공식 사이트에서 제공되는 예제들을 보는 것으로도 문제없이 사용 가능한 수준이긴 하지만 뭔가 아쉬운 부분이 있기도 했습니다. 이 사이트에서는 전체적인 볼륨을 축소시킨 만큼 검색이 편하다는 생각이 들었습니다. Bootstrap 4 Cheat Sheet - The ultimate list of Bootstrap classes Quickly find your Bootstrap classes on this interactive Bootstrap cheat sheet. It includes code samples and live preview of elements. hackerthemes.. 2019. 9. 19. 웹 접근성의 명도 대비 확인을 수월하게 해주는 Contrast Grid #1946 https://contrast-grid.eightshapes.com/ 웹 접근성 프로젝트를 진행할 때 지켜야 하는 항목 중에 색상 문제가 있습니다. 저시력자들을 위하여 배경색과 본문 텍스트의 색상을 읽기 쉽도록 가능한 고대비를 사용하는 방식을 나타내는 항목인데요. 판단 기준은 색상에 따라서 AA(4.5), AAA(7)의 기준을 충족시켜야만 통과가 가능합니다. 기본적으로는 4.5:1을 충족하면 문제가 없지만, AAA(7:1)를 충족시키기 위해선 대비가 더 높아지게 됩니다. 이러한 작업을 할 경우 매번 컬러를 찍어가면서 하는 방법이 있을 수 있지만, 해당 서비스를 사용하여 초기부터 컬러 가이드가 잡혀 있다면 해당 색상을 일괄적으로 반영시킨 뒤에 하나의 화면에서 기준에 부합하지 않는 경우에 대하여 .. 2019. 9. 17. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
