본문 바로가기
간단한 웹스크롤애니메이션 라이브러리 AOS 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다. AOS (Animate on Scroll) AOS 소개 페이지 AOS AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS 깃헙 페이지 michalsnik/aos michalsnik/aos Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub. github.co..
VSCODE에서 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 VSCODE는 2019년 기준 가장 많은 프론트엔드 개발자들이 사용하는 텍스트에디터라고 볼 수 있는 Visusal Studios Code의 약자입니다. 화면을 나누어서 파일 열기 화면을 나누어서 파일을 여는 방법은 기본적으로 가장 쉬운 방법을 파일을 오픈할 때 드래그를 통해서 원하는 공간에 배치하면, 자동으로 스플릿 뷰를 만들어서 배치할 수 있게 VS Code가 도와줍니다. 또 다른 방법은 Control+P를 통해서 파일을 서치해서 여는 경우나, 사이드바의 파일탐색기를 통해서 파일을 여는 경우 파일이 선택된 상황에서 Control+Enter를 하면 자동으로 오른쪽 공간에 스플릿 뷰를 만들어서 파일이 열리는 것을 확인하실 수 있습니다. 맥의 경우는 Control이 아닌 CMD를 눌러야 합니다. 나누어지 열..
뱅킹앱 UI디자인 시범작 시안 (PSD 원본 파일 포함) 2018년 10월 13일에 시범작으로 작업한 사항으로 UI디자인 연습용 작품입니다. 해외 뱅킹앱 디자인 사례를 참고로 하여 디자인한 시범작입니다. 포토샵을 이용해서 작업했습니다. PSD 원본 파일도 함께 참고 차원에서 공유드립니다. 레이어 정리는 안 되어 있으니 참고 바랍니다.
좋은 대시보드 디자인의 10가지 원칙 (2019) 본 포스트는 Saadia Minhas가 2019년 11월 27일에 작성한 10 Rules of Dashboard Design 포스트를 지식을 널리 알리기 위한 목적으로 번역하여 작성한 글입니다. 저작권 및 내용에 문제가 있을 시 연락을 주시면 그에 적절한 조치를 취하겠습니다. 왜 대시보드 디자인이 중요한가요? 대시보드는 정보를 시각화하는 역할을 합니다. 특히 복잡한 정보들의 집합체를 사용자들이 이해하기 쉬운 포맷으로 전달하는 것이 이것의 목적이라고 볼 수 있습니다. 사용하기 좋은 대시보드는 1) 명확해야합니다 좋은 대시보드는 요청된 정보를 명확하게 표현해야 합니다. 사용자가 대시보드를 볼 때 사용자는 5초 안에 대시보드의 용도를 확인할 수 있어야 합니다. 사용자를 몇 분간 머무르면서 대시보드의 용도를 확..
피그마(Figma)가 앞으로 대세 디자인 프로그램이 될 수밖에 없는 이유 최근 UX Design Tool 2019 Survey에 따르면 피그마의 이용률 상승세가 뚜렷하며, 이제는 스케치의 절반에 달하는 점유율을 보이고 있다고 밝힌 바가 있습니다. 피그마 베타 시절부터 피그마를 어반젤리스팅하던 사람으로서 이같은 현상이 당연하게(?) 느껴지기도 하면서도, 한편으로 이같은 확장세는 여기서 멈추지 않고 더욱 그 영향력이 증대될 거라는 확신 아닌 확신을 갖게 되었습니다. 특히 단순히 UI디자인 영역에 국한되는 것이 아닌 '디자인 소프트웨어'로서, 과거 2000년대 초반의 포토샵의 위상만큼이나 대중적인 소프트웨어로 디자이너 뿐 아니라 일반인들에게까지 자리잡을 것이라고 생각합니다. 이번 글에서는 그 이유에 대해서 개인적인 견해 몇 가지를 밝히고자 합니다. 피그마의 미친 확장성 윈도우XP에..
일러스트레이터2020에서 진화된 Path Simplify 기능 일러스트레이터의 최신 버전인 2020에서 제공하는 기능 중 가장 주목받는 기능 중 하나가 바로 개선된 Path Simplify 입니다. 기존에도 쓰임이 없는 것은 아니었지만, 이번 버전을 통해서 기능적 효용성이 더욱 커짐과 동시에 고유 인터페이스가 추가되면서 사용성 또한 함께 증가하였습니다. 이 메뉴의 사용은 Object > Path > Simplify에서 사용이 가능합니다. 드라마틱하게 기능성이 향상되었다고 보기는 힘들지만, 어느정도 신뢰할만한 성능을 바탕으로 지저분한 Path를 깔끔하게 정리해주는 역할을 함과 함께 새로 추가된 인터페이스가 매우 사용하기 편리하여 손쉽게 단순화 정돌르 설정할 수 있습니다. 위 사진의 예제는 사실 캘리그라피 형태의 Path이기 때문에 Simplify를 적용하기 조금 애매..
HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) 미디어쿼리 없이 테이블로 반응형 레이아웃을 구성이 가능하다는 걸 알고 계셨나요? 아니 그것보다 왜 그런 방법을 써야 하냐고 물으실 거 같습니다. 사실 미디어쿼리를 쓰면 되기 때문에 이 방법은 딱히 효용이 없다고 느끼실 수도 있습니다. 다만 레가시한 환경에서 반응형 구성이 필요할 때 유용한 방법이 될 수 있습니다. 미디어쿼리가 적용되지 않는 예전 Ie 브라우저에 최적화를 해야 하는 웹페이지이거나, 특히 '이메일' 템플릿을 구성하는 데 있어서 여러 클라이언트와 아웃룩 등의 독특한 랜더링 환경에서 정상적으로 웹페이지를 표시하는 데에 있어서 특히 유용할 수 있습니다. 반응형 테이블: 이메일 템플릿 제작에 유용 용도에 대해 앞서 말씀드렸는데 사실 주된 용도는 바로 이 이메일 템플릿 제작에 활용하는 것이라고 볼 수..
키크론 k1 (v3) keychron 기계식 키보드 리뷰 맥용 세계에서 가장 얇은 기계식 키보드로 잘 알려진 키크론 사의 K1입니다. 출시 이후 세 번의 버전업을 진행한 제품으로 제가 사용하고 있는 제품은 가장 최근인 V3버전입니다. 다른 버전과의 차이는 제가 아는 바로는 키보드 스위치가 다르다고 알고 있습니다. 이전 모델까지는 청축이었는데 V3부터는 황축을 사용한다고 합니다. 이번 리뷰 또한 개인적인 느낌 위주와 동영상 리뷰(타이핑 사운드) 위주의 내용으로 리뷰를 진행하고자 합니다. 얇고 이뻐서 좋다 K2처럼 이 모델 역시 매우 이쁨니다. 스타일이 좀 다르긴 한데, K2는 레트로 느낌이었다면, K1은 그보다는 조금 더 현대적입니다. 이번에는 RGB 백라이트를 구매했는데 이 또한 매우 만족스럽습니다. 그리고 무엇보다 K2의 단점이었던 높이 문제가 이 키보드에서는 없..