티스토리

디자인하고 기록하는

검색하기

블로그 홈

디자인하고 기록하는

singsong-pen.tistory.com/m

다양한 경험을 기록합니다.

구독자: 3

방명록 방문하기

주요 글 목록

Magnific AI 사용기(1) - 이미지의 디테일을 올리며 업스케일하기 & 구독 결제하는 법 미드저니나 스테이블 디퓨전을 사용해 이미지를 생성하면 기본 사이즈는 512x512 이다. 원하는 이미지가 나오면 디테일을 올리는 작업을 하지만 간혹 자체 툴로는 한계가있다. 외부 업스케일러 중 가장 효과가 드라마틱했던 툴을 사용해본 실제 사용기다. 1. Magnific AI https://magnific.ai/ Magnific AI The most advanced AI upscaler & enhancer. Magnific can hallucinate and reimagine as many details as you wish guided by your own prompt and parameters! magnific.ai 실제 인물이미지, 애니메이션 일러스트, 영상 등 이미지 종류에 따라 옵션을 조절하며 사.. 공감수 4 댓글수 5 2024. 3. 1.
디자이너 AI 활용기(3) - 3D 캐릭터로 치비 캐릭터 만들기 https://singsong-pen.tistory.com/11 디자이너 AI 활용기(2) - 미드저니로 나만의 3D 캐릭터 만들기 이전 글에서 블루윌로를 사용했지만 퀄리티를 극복하지 못했고, 결국 미드저니를 3개월째 구독 중이다. 특히 V6으로 업데이트되고 퀄리티는 더더욱 좋아졌다. UI/UX 디자인 실무 사용은 어렵지만 singsong-pen.tistory.com 이전 글에서 만들어본 3D 캐릭터를 치비 캐릭터로 바꿔본다면 어떨까? 치비 캐릭터란? 국에서 흔히 'SD'라고 불리는 그림체인데, 원래는 일본어 ちび(꼬마를 일컫는 속어)라고 불린다. 캐릭터를 만들 때 머리를 키우고 몸통을 줄여 그리는 기법을 말한다. 보통 머리가 몸통+다리 크기와 비슷한 2등신이나, 몸통, 상반신, 하반신의 비율이 비슷해지.. 공감수 1 댓글수 0 2024. 2. 26.
디자이너 AI 활용기(2) - 미드저니로 나만의 3D 캐릭터 만들기 이전 글에서 블루윌로를 사용했지만 퀄리티를 극복하지 못했고, 결국 미드저니를 3개월째 구독 중이다. 특히 V6으로 업데이트되고 퀄리티는 더더욱 좋아졌다. UI/UX 디자인 실무 사용은 어렵지만 그래픽 리소스 제작 등에서 다양하게 활용 중이다 (스테이블 디퓨전, adobe firefly, 미드저니, 달리 3을 용도에 맞게 섞어서 사용한다) 3D 툴을 사용하지 못하지만 미드저니를 통해 프로필용 3D 캐릭터를 만들어 보았다. 프롬프트 입력 방법 1 girl, short hair, sulky, big eye, full body, disney pixar style, blender 3d,Mobile game character, isometric 픽사 애니메이션스타일을 원해서 니지저니 모델로 돌렸더니 2D 애니메이션.. 공감수 4 댓글수 0 2024. 2. 23.
디자이너 AI 활용기(1) : 미드저니와 블루윌로(bluewillow) 사용법 작년에 위 그림으로 이목을 끌었던 미드저니 디자이너 관점에서는 예술적인 그림보다 배너나 디자인 리소스로 과연 활용이 가능한가?입니다. 직접 사용 후 실무에 사용할만한 리소스를 제작해 보려고 합니다. 미드저니란? 사용자의 입력을 기반으로 그림을 생성해 주는 생성형 AI이다. 미드저니 가입하기 1. https://www.midjourney.com/ 에서 "Join the Beta" 클릭 2. 디스코드를 통해 접속, 닉네임과 생년월일 등 정보를 입력합니다. 접속하면 디스코드 채팅창이 나오고 왼쪽 사이드바에서 방을 확인할 수 있습니다. (newbies-숫자) AI에서 처음 접하게 되는 단어는 '프롬프트' 프롬프트는 AI에게 작업 지시를 나타내는 문장 또는 질문을 말하며, 프롬프트 작성 능력에 따라 결과물이 크게.. 공감수 2 댓글수 0 2023. 9. 25.
이미지 최적화 방법과 사이트 : 퀄리티와 용량 둘 다 챙기려면? 1. 이미지 최적화가 필수인 이유 1. 로딩 속도 개선 이미지 용량을 줄이면 웹 페이지의 로딩 속도를 향상시킬 수 있다. 로딩 속도가 빠르면 사용자가 더 빠르게 웹 페이지를 탐색할 수 있으므로 사용자 관점에서 봤을 때 필수적인 부분이다. 2. 데이터 사용량 줄이기 사용자의 모바일 기기는 이미지를 로딩하기 위해 데이터를 사용하므로, 이미지의 용량만큼 데이터(요금)를 사용하게 된다. 이미지가 많은 쇼핑몰 사이트에서 데이터가 순삭되는 이유! 3. 이미지 포맷(확장자)과 사이즈 포토샵이나 피그마에서 디자인 후 작업한 이미지에 맞게 포맷을 설정해야한다. JPG는 실제 사진과 같은 복잡한 이미지, 로고와 아이콘 또는 단색위주의 그래픽 요소가 들어간 배너에는 PNG가 적합하다. 사이즈는 보통 4배수로 export 하.. 공감수 1 댓글수 0 2023. 3. 10.
UI 디자인 : 디자인이 막힌다면 열어보는 유용한 레퍼런스 사이트 모음 제가 실무에서 사용하고 있는 저의 즐겨찾기 사이트를 공유합니다. 🤫 레퍼런스 서치 할 때 찾아보는 8개의 사이트! 👇 1. Design notes 디자인이 막막할 때 열어보는 사이트. 영감을 주는 레퍼런스는 물론 아이콘, 컬러, 스톡이미지까지 다양한 사이트를 한 번에 볼 수 있다. 이 글에서 제일 유용한 사이트가 아닐까! Design notes A free resource library for product designers UI Inspiration Mobbin Discover the latest iOS UI design patterns. Rowlab Hand-picked collection of Android apps screenshots with mobile patterns for your insp.. 공감수 1 댓글수 2 2023. 3. 6.
PWA가 뭐지? 디자이너의 입장에서 쓰는 실제 적용 후기 현재 운영하는 자사 서비스 디자인은 웹 개발과 안드로이드/iOS 기반의 앱으로 각각 개발되어있다. 그러다가 PWA 도입에 대한 얘기가 들려왔고, 이 생소한 이름을 chatGPT에게 물어봤다. 아래 1번은 ChatGPT의 답변이다. 1. PWA가 뭐지? PWA(Progressive Web App)는 모바일 및 데스크탑 웹사이트에서 제공하는 웹 어플리케이션으로, 기존의 웹사이트에 추가 기능을 더해 네이티브 앱과 유사한 기능을 제공한다. 오프라인 모드에서 작동: 캐시를 이용해 기본적인 기능 사용 가능 네이티브 앱과 비슷한 경험 제공 : UI, 성능, 동작 및 애니메이션을 제공 푸시 알림 기능 : 브라우저를 통해 푸시 알림을 제공 보안 강화 : HTTPS를 통해 안전한 연결을 제공 앱 스토어 없이 설치: 사용자.. 공감수 1 댓글수 0 2023. 3. 5.
피그마 자동화 툴 Automator : 한 번의 클릭으로 디자인하기 지난 글에 소개했던 Diagram 만든 피그마 플러그인 Automator 를 사용해 본 후기이다. 아래 사이트에서 일부(1개의 액션)를 무료로 사용해 볼 수 있다. Automator for Figma Automate your Figma tasks in one click. automator.design Automator 사용 방법 Automator 플러그인을 다운받는다. 위 사이트 또는 피그마 상단바에서 바로 다운받을 수 있다. 처음 시작하면 버튼을 통해 automation을 추가할 수 있다. 아래 설명과 같이 1개의 액션까지 무료로 사용 가능하고, 그 이후는 구독을 통한 업그레이드가 필요하다. (요금은 글 하단 참고) 사용해 보기위해 만들 예제는 블로그에 동일한 레이아웃으로 보여지고 있는 썸네일 레이아.. 공감수 1 댓글수 1 2023. 3. 4.
피그마 AI로 실무 디자인 가능해? - Figma AI Genius(지니어스) Notion AI, 만능 비서가 된 chatGPT, 플랫폼 별로 클릭한번에 글을 써주는 클로바의 뤼튼 등 각종 분야에서 다양한 기술의 AI가 나타나면서, 엄청난 대체제가 생긴 느낌에 사람들이 신기함과 두려움을 느끼고있다. 자연스레 나도 UI 디자이너로서 지금의 밥줄(?)의 영향이 있지 않을까 생각하게 되었다. "디자인을 대신해주는 AI가 있을까?" "AI 디자인 실력은 어느정도일까?" "기획서의 요구사항에 맞게 어디까지 반영할 수 있을까?" 라는 질문으로 열심이 검색하다가 신기한걸 발견했다. 바로 피그마에서 사용할 수 있는 AI이다. Diagram에서 만든 Genius(지니어스)이다. 피그마 디자인 AI - Genius (지니어스) 아직은 출시전으로 'Join Waitlist'를 클릭하면 구글 이메일을 .. 공감수 3 댓글수 0 2023. 3. 3.
디자이너들이 꼭 알아야할, Bodymovin 플러그인 설치법 부제목 : HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (2) 이전 글 HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (1) 구현 내용 감정 이모티콘으로 내용에 대한 피드백 표시 선택하면 움직이는 모션이 보이는 UI 디자인 모션의 이미지는 Lottie 에서 무료로 제공하는 리소스를 사용하여 구현한다. 또한, 웹 사이트 singsong-pen.tistory.com 1편은 Lottie 기본 사용법을 다룬 내용이 있어요. 안보신 분들은 다녀오세요! 👋🏻 1편에 작업을 하던 중 한 가지 문제점을 발견했다. 🧐 문제점 선택을 하기 전에는 default 이미지가 보여져야하는데, 사용하려는 리소스는 모션의 처음 상태가 빈 화면인 것이다. 😱 '리액션 2' 처럼 👍 가 진하게 .. 공감수 2 댓글수 2 2023. 3. 2.
HTML 웹에 Lottie 애니메이션을 추가하려면 - 리액션 UI (1) 구현 내용 감정 이모티콘으로 내용에 대한 피드백 표시 선택하면 움직이는 모션이 보이는 UI 디자인 모션의 이미지는 Lottie 에서 무료로 제공하는 리소스를 사용하여 구현한다. 또한, 웹 사이트 내 리소스 경량화가 중요했기 때문에 gif보다 가벼운 Lottie 라이브러리를 선택했다. 일단 Lottie 사용법부터 보자! 👊 Lottie 란? Airbnb가 공개한 애니메이션 라이브러리, 웹에서도 보다 가볍게 애니메이션 파일을 불러 올 수 있고, 다양한 플랫폼에 대응이 잘된다. Bodymovin이라는 After Effects 플러그인을 사용하여 애니메이션을 JSON 파일로 내보낼 수 있어 개발자도 쉽게 애니메이션을 적용 할 수 있다. 단점이라면, 안드로이드 저사양 단말에서는 지원이 안되기 때문에 분기처리가 필.. 공감수 0 댓글수 0 2023. 3. 1.
아이폰 홈 화면에 바로가기 아이콘 추가하고 이름 설정하기(Creating shortcut icon and title meta tags for iOS Safari) iOS Safari에서는 웹사이트의 바로가기 아이콘 이미지와 타이틀을 미리 설정하여 사용자들이 쉽게 인식할 수 있도록 지원하는데 이를 가능하게 하는 방법 중 하나는 메타 태그를 이용하는 것이다. 단, 그 전에 알고 넘어가야할 2가지가 있다. 웹 상단 탭에 보여지는 아이콘인 파비콘과 사이트를 공유했을 때 나타나는 OG이미지 설정이다. 1. 파비콘 (favicon) 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 아이콘으로 즐겨찾기 아이콘 (favorite icon)의 줄임말. 책갈피, 즐겨찾기 추가를 했을 때 보여지는 아이콘이다. 2. 오픈 그래프 (OG) 오픈그래프(OG, 오픈 그래프 프로토콜, 어떤 HTML 문서의 메타정보를 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들.. 공감수 2 댓글수 0 2023. 2. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.