Jake의 블로그

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

# 의 숫자를 focus가 되지 않아도 표시하는 방법 - 은 웹에서 사용자에게서 입력을 받는데 사용되는 HTML 엘레멘트 중 하나입니다. 그 중에서 숫자로 입력을 받는 경우 type="number"로 정의해서 받는데, 별도의 UI 프레임워크를 사용하거나 직접 구현하지 않을 경우, 해당 엘레멘트가 활성화 된 경우에만, 증감 화살표가 표시되는 경우가 있습니다. 본 포스팅에서는 이런 문제를 해결할 수 있는 방법입니다. input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: inner-spin-button; opacity: 1; }

# 오페라 브라우저을 이용해서 무료로 VPN을 사용하는 방법 소개 - 글로벌한 웹 환경에서 살다보면, 가끔 VPN이 필요해지는 상황이 있습니다. 해외 서버에서 게임을 하는 등의 VPN을 적극적으로 사용하는 경우를 제외하면, 1회성으로 필요한 경우가 대부분 입니다. 그러다보니 무료체험 등을 이용하는 경우가 많은데, 대부분의 VPN 서비스는 회원 가입을 요구하거나 우선 구독을 해야 하는 곳도 많습니다. 그러다보니 부담도 되고 귀찮게 느껴집니다. 이번 포스팅에서는 이런 상황에서 도움이 될 수 있는 방법을 소개하려고 합니다 # 사용 방법 - 우선 오페라 브라우저를 설치 하고 실행 합니다. 아래 이미지와 같이 우측의 메뉴 버튼을 눌러 사이드 메뉴를 띄우고, VPN 메뉴로 이동해줍니다 - VPN탭에서 옵션을 활성화..

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