본문 바로가기
반응형

product34

창크기를 조정시켜주는 맥용 무료 앱 - 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.
99% 세일! 상용프로젝트에 사용가능한 18종의 폰트를 $29에 구입 가능! #1944 The Typographer’s Versatile Collection - Design Cuts Versatility is key when it comes to making your design work pop and this collection is jam-packed with the most popular and versatile fonts available i www.designcuts.com Design Cuts에서 상용 프로젝트에서도 안심하고 사용할 수 있는 폰트를 기간한정으로 판매하고 있습니다. 정가로 구매할 경우 $3028(약350만원) 상당에 이르는 가격이지만, 99%의 세일로 $29(약35,000원)으로 구입가능한 세일입니다. 폰트가격이 상당히 비싸서 구매하기가 어려웠다면 이번 .. 2019. 9. 6.
728x90
반응형