Jake의 블로그

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

# react-native-assets를 활용해서 네이티브 프로젝트에 에셋 추가하기 - React Native 환경에서 개발을 하다보면, Fonts를 변경하거나, 효과음이나 배경을을 추가하기 위해 MP3와 같은 음원 파일을 사용해야 하는 경우가 생깁니다. 문제는 이미지처럼 쉽게 포함시키지 못하고, XCode에 파일을 추가하거나, Android의 리소스에 추가하는 등의 추가작업이 요구됩니다. 하지만 이는 개발 하는 입장에서 시간을 빼았기는 귀찮은 일입니다. 본 포스팅에서는 이런 경우 도움이 되는 방법을 소개하려고 합니다 # 사용방법 - 자세한 사용방법 및 옵션들은 아래의 페이지에 잘 설명되어 있으니 참고하시기 바랍니다. GitHub - unimonkiez/react-native-asset: Linking ..

# Mac 운영체제에서 이미지의 배경을 날리는 기능 사용하기 - 아이폰에 기본 포함되었던 누끼 따기(이미지 배경 제거) 기능을 맥에서도 사용하실 수 있습니다. 본 포스팅에서는 아주 간단히 사용방법과 예제를 보여드려고 합니다. 먼저 이미지를 준비합니다. # 사용법 - 이미지를 선택한 후에 우클릭으로 메뉴 창을 띄운 후, Quick Actions > Remove Background를 누르시면 끝입니다. # 결과물 - 이미지에 따라서 결과물의 퀄리티가 약간 씩 차이가 나기는 하지만, 생각보다 아주 깔끔하게 잘 배경을 제거해 주기 때문에 불필요한 업무를 줄이는데 큰 도움이 될 것 같습니다.

# Figma IPhone 14 Pro 무료 목업 - 피그마에서 사용가능한 IPhone 14 Pro 무료 목업 입니다. 시뮬레이터를 IPhone 14 Pro로 실행하셔서 스크린 샷을 저장하고, 불러와서 합쳐서 사용하시면 좋을 것 같습니다. iPhone 14 Pro Free Mockup | Figma Community Figma Community file - Simple iPhone 14 Pro Mockup based on the September 7th announcement. All ColorsAll VectorAll Free, No RestrictionsEditable UIHide Lens Reflection100% Built in Figma Will update with Dynamic Island ..

# 아이폰(시뮬레이터) 프레임까지 함께 스크린 샷 찍는 방법 - 아이폰 앱을 개발을 완료하는 시점이 다가 오면, 앱스토어 등에 제출하기 위해서 아이폰의 프레임이 포함된 스크린 샷을 필요로 하게 되는 경우가 있습니다. 본 포스팅에서는 이럴 때 가장 쉽게 사용할 수 있는 방법을 소개하려고 합니다. 참고로 맥 운영체제에서만 가능합니다. # 방법 소개 - 우선 스크린 샷을 찍고 싶은 아이폰 기기의 시뮬레이터를 실행합니다. 그리고 스크린 샷을 찍을 앱을 실행합니다. - 이제 맥 운영체제의 스크린 샷 단축키인 Cmd + Shift + 4를 누릅니다. 그리고 시뮬레이터위로 커서를 가져간 후에 스페이스 바를 누릅니다. 사실 이 기능은 스크린 샷 영역을 커서 가 속한 윈도우를 영역으로 지정하는 것입니다. 만약 제대로 지..

# @tailwindcss/aspect-ratio를 활용한 비율로 정의하는 레이아웃 정하는 방법 - UI의 레이아웃을 정의하다보면, 가끔 구체적인 사이즈는 변할 수 있지만, 가로와 세로의 비율로 사이즈를 정의하고 싶은 경우가 생깁니다. 저의 경우 정사각형 블록을 정의하고 싶어서 검색을 하다 오늘 소개할 TailwindCSS 플러그인을 발견하게 되었습니다. # 사용 방법 - 언제나와 같이 설치를 진행해 줍니다. 참고로 본 포스팅에서 직접적인 TailwindCSS에 관한 내용은 생략합니다 yarn add -D @tailwindcss/aspect-ratio 그리고 아래와 같이 tailwind.config.js에 플러그인을 추가합니다. // tailwind.config.js module.exports = { t..

# React Native에서 사용가능한 가장 마음에 드는 react-native-dropdown-picker - React Native에서 선택 옵션을 구현할 때, 일반적으로 플랫폼 별로 제공하는 네이티브 Picker를 사용하는 경우가 많다보니, 클로스 플랫폼 개발 시에 UI의 통일성이 떨어지고, 디자인이 마음에 들지 않는 경우가 많습니다. 그렇다고 Picker를 직접 개발하거나 이를 위해 다른 UI 프레임워크를 적용하기에는 부담이 큽니다. 본 포스팅에서는 이런 경우에 유용하게 사용할 수 있는 라이브러리를 소개하려고 합니다 # 관련 사이트 - 깃헙 저장소 GitHub - hossein-zare/react-native-dropdown-picker: A single / multiple, categoriza..

# 2023.06 이달의 무료 콘텐츠 ※ 언리얼 엔진에서 사용 가능한 컨텐츠입니다. 일정 기간 동안 할인율 100%로 제공하는 정기 이벤트입니다. 구입 후 언리얼 엔진 라이브러리에서 다운 및 이용이 가능합니다. 당장 사용하지 않더라도 일단 받아놓으시면, 언젠가 필요해질 수 있습니다. # 다운로드 https://www.unrealengine.com/marketplace/ko/assets?count=20&sortBy=effectiveDate&sortDir=DESC&start=0&tag=4910 마켓플레이스 탐색&검색 | 언리얼 엔진 마켓플레이스 www.unrealengine.com # 무료 컨텐츠 구성

# 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..