Jake의 블로그

# 프론트엔드에서 UI를 구현하는 작업을 하다보면 가끔 정사각형 레이아웃이 필요한 경우가 있다. 구체적인 사이즈가 정해져 있으면 문제가 없지만, 가끔 반응형이나 기기 사이즈에 따라서 구현이 필요한 경우, 오늘의 팁을 알아두면 좋다. # 구현 방법 - 기본적으로 tailwindcss가 설정되어 있는 환경에서 아래의 플러그인을 설치하고 적용해준다 https://github.com/tailwindlabs/tailwindcss-aspect-ratio GitHub - tailwindlabs/tailwindcss-aspect-ratio Contribute to tailwindlabs/tailwindcss-aspect-ratio development by creating an account on GitHub. git..

# DriverJS를 활용해서 사용 가이드를 쉽게 구현하는 방법 소개 - 웹 또는 웹앱을 개발하다보면, 사용자 경험을 좋게 만들기 위해 최대한 불필요한 정보를 줄이는 작업을 하게 됩니다. 문제는 이러한 과정에서 사용자에게 각각의 기능에 대한 설명이 부족해지는 경우가 있는데, 문서 페이지에 정리를 아무리 잘해놔도 사용자 입장에서는 그저 사용하기 불편하다고 느끼기 마련입니다. 그러다 보니 필요한 경우 UI에 기능에 대한 안내를 표시를 하면서 가이드를 보여주는 방법이 효과적일 수 있습니다. 하지만 이 방법은 구현에 더 많은 리소스가 필요하기 때문에 포기하게 되는 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 Driver.js 라이브러리를 소개하려고 합니다 # 사용방법 - Github Page..

# SVG를 활용한 나만의 디자인을 쉽게 만드는 방법 소개 - SVG는 벡터 그래픽을 표현하기 위한 표준 포맷입니다. 벡터 그래픽이기 때문에 사이즈에 대한 스트레스에서 해방 될 수 있고, React를 사용한다면 더 다양하게 활용이 가능하기 때문에, 자주 사용하게 됩니다. 하지만 결국 이런 편리함이 있어도, 디자인 적인 감각이 없다면, 아이콘을 적용하는 수준이상으로 활용하기가 어렵습니다. 본 포스팅에서는 이러한 경우에 조금 더 쉽게 있어 보이는 디자인 요소들을 생성할 수 있는 웹 사이트를을 소개하려고 합니다 # 웹사이트: https://fffuel.co/ Free SVG generators, color tools & web design tools 🚀 Here you'll find a collection o..

# HyperUI - 무료 오픈소스 Tailwind CSS 컴포넌트 활용 방법 - Tailwind CSS는 가장 핫한 CSS 프레임워크 중 하나입니다. 하지만, 다른 UI 프레임워크들과는 다르게 직접적으로 컴포넌트를 제공하지 않기 때문에, 실제로 활용을 하려면 Headless UI와 같은 보조 라이브러리나 컴포넌트, 예시들이 필요한 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 HyperUI를 소개하려고 합니다 # HyperUI 사이트 https://www.hyperui.dev/ Free Open Source Tailwind CSS Components | HyperUI Free Tailwind CSS components that can be used in your next project..

# TailwindCSS에서 글자 배경에 Gradient를 적용하는 방법 - text-transparent로 투명하게 만든 텍스트를 gradient가 적용된 배경으로 마스킹하는 간단한 구조입니다. TAB DISPLAY - 적용 결과입니다 - 어떤 조합으로 Gradient를 정해야 할 지 모르겠거나 직접 TailwindCSS 문법으로 Gradient를 작성하기 번거로울 경우, 아래의 사이트를 이용하시면, 바로 원하는 Gradient의 TailwindCSS 코드를 복사해서 적용할 수 있으니, 이용해 보시면 좋을 것 같습니다. Gradients for Tailwind CSS | Hypercolor A curated collection of beautiful Tailwind CSS gradients using ..

[UI/UX] 앱 스크린 샷으로 Mockup 이미지 만드는 방법 #들어가며 출시한 앱을 홍보해야 할 시점이 되면 앱 스크린 샷이 들어간 이미지가 필요해지는 경우가 종종 있다. 오늘은 이런 이미지를 쉽게 만들 수 있는 무료 사이트를 소개하려고 한다 # Mockup Image를 만드는 방법 1. 아래의 사이트에 접속 한다 Mockuper.net | Free custom mockups generator Mockuper, the free mockups generator to create custom images to show your awesome works mockuper.net 2. 원하는 템플릿을 찾는다 3. 원하는 옵션을 설정하고 스크린 샷을 업로드 한다 ※ 투명도, 배경색, 반사 형태, 반사 여부를 설..

※# react-native-styling-cheat-sheet GitHub - vhpoet/react-native-styling-cheat-sheet: Most of the React Native styling material in one page Most of the React Native styling material in one page - GitHub - vhpoet/react-native-styling-cheat-sheet: Most of the React Native styling material in one page github.com ※ 어렴풋이 기억이 나는 요소의 경우 대부분 코드 수정 툴(VSCode 등)에서 자동으로 제안을 해주기 때문에 활용도가 떨어질 수는 있지만, 평소에 잘 사용..