분류 전체보기51 디자이너를 위한 ChatGPT 활용법 5가지 디자인에도 AI가 필요해!디자이너에게 ChatGPT가 무슨 도움이 되냐고요? 의외로 많습니다.단순한 텍스트 생성 도구를 넘어서, 브레인스토밍, 카피 작성, 사용자 흐름 정리까지 도와주는 똑똑한 도우미랍니다.이번 글에서는 디자이너가 실무에서 ChatGPT를 활용할 수 있는 방법을 5가지로 정리해봤어요.1. 카피라이팅? ChatGPT가 써줘요디자인 시안에 들어갈 문구, 생각보다 오래 걸리죠.CTA 버튼 문구, 랜딩 페이지 헤드라인, 툴팁 텍스트까지...ChatGPT에게 “명확하고, 친근한 말투로 버튼 문구 5개 제안해줘”처럼 요청하면, 실용적인 문구를 바로 받을 수 있어요.2. 사용자 흐름(User Flow) 아이디어 구상새로운 기능을 설계할 때, 사용자 흐름이 막히는 경우 있죠?“이런 기능을 쓰는 유저의 .. 2025. 4. 18. 디자인 시스템이 뭐길래? 일관성과 확장성을 위한 디자이너의 필수 무기디자인 시스템, 다들 한 번쯤 들어보셨죠?하지만 “디자인 시스템이 정확히 뭐야?”라는 질문에 명확히 답하는 건 생각보다 쉽지 않습니다. 그냥 스타일 가이드를 의미할까요? 컴포넌트 라이브러리를 말하는 걸까요?디자인 시스템은 그보다 훨씬 더 큰 개념입니다. ✅ 디자인 시스템이란?디자인 시스템은 디지털 제품 전반에 일관성을 유지하고, **디자이너-개발자 간 협업을 원활하게 만들어주는 하나의 '언어 체계'**입니다.즉, 디자인의 원칙, 토큰, 컴포넌트, 규칙, 문서화까지 모두 포함하는 종합적인 설계 체계입니다.💡 왜 필요한가?디자인 시스템이 없으면 이런 일이 벌어집니다:같은 버튼인데 페이지마다 크기/색/텍스트 스타일이 다름디자이너마다 사용하는 컴포넌트가 미묘하게 다름.. 2025. 4. 17. 누끼따기 사이트 누끼따기란 무엇인가요?누끼따기는 이미지에서 배경을 제거하고, 원하는 주제만 남기는 작업을 말해요. 최근에는 다양한 온라인 서비스가 이 과정을 간편하게 도와주고 있어서 많은 사람들이 이용하고 있죠. 특히, SNS나 블로그에 사용할 이미지를 편집할 때 유용해요.누끼따기 사이트의 필요성 배경을 제거하는 것이 필요한 경우는 많아요. 예를 들어, 상품 사진이나 프로필 사진을 만들 때 배경이 복잡하면 주제가 제대로 부각되지 않죠. 그래서 누끼따기를 통해 깔끔한 이미지를 만들어내는 것이 중요해요. 추천하는 누끼따기 사이트 5가지 1. Remove.bgRemove.bg는 가장 유명한 배경 제거 사이트 중 하나예요. 사용법이 정말 간단해서 이미지를 업로드하면 자동으로 배경을 제거해줘요. 이 외에도 다운로드 옵션이 다양해.. 2025. 4. 16. AI의 선두주자들! 지금 당장 활용해야 할 TOP AI 사이트 5선 최근 AI 기술의 비약적인 발전으로, 우리의 일상과 업무 환경에 혁명을 불러일으키고 있습니다. 오늘은 여러분의 창의력과 생산성을 극대화할 수 있는, 지금 바로 활용해야 할 AI 사이트 5곳을 소개합니다. 각 사이트의 놀라운 기능과 활용 팁을 확인하고, 아래 URL을 통해 바로 이용해 보세요.1. ChatGPT (OpenAI)주요 특징대화형 AI: 자연스러운 언어 처리로 사용자의 질문에 빠르고 정확하게 답변합니다.다양한 활용: 고객 상담, 글쓰기 보조, 코딩 질문 등 여러 분야에서 유용하게 활용 가능합니다.지속적 업데이트: OpenAI의 지속적인 연구와 업데이트로 최신 기술을 경험할 수 있습니다.활용 팁아이디어 브레인스토밍: 복잡한 아이디어를 정리하고 새로운 관점을 도출할 때 유용합니다.글쓰기 지원: 초안.. 2025. 3. 26. [Soulmask] 소울마스크 알로에 위치 근처 원숭이 둥지 주변에서 확인 할 수 있다 2024. 9. 22. [Soulmask] 소울 마스크 피라미드 보스 재료 흉악한 검치 포식자 (의식강도: 5)상급 신선한 고기 5개짐승 뼈 5개짐승 피 5개제사용 그릇 1개 난폭한 검치 포식자(의식강도: 40) 희귀 신선한 고기 5 개상급 짐승 뼈 5개상급 짐승 피 5개제사용 그릇 2개 파멸의 검치 포식자(의식강도: 55)희귀 신선한 고기 10개희귀 짐승 뼈 5개희귀 짐승 피 5개제사용 그릇 3개땅의 제사용 그릇 1개 맹독 안개 개구리(의식강도: 30)알로에 에센스 5개산성 용액 5개혈액 순환 크림 2개제사용 그릇 1개 난폭한 안개 개구리(의식강도: 40)식물 에센스 2개흥분제 2개혈액 응고 크림 2개제사용 그릇 2개 파멸의 안개 개구리(의식강도: 55)식물 에센스 4개흥분제 4개혈액 재생 크림 2개제사용 그릇 3개물의 제사용 그릇 1개 강력한 고릴라(의식강도: 35)구.. 2024. 9. 22. 웹 표준화의 중요성: 왜 웹 개발에서 준수해야 할까? "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 웹 디자이너와 개발자로서 우리 모두는 멋진 웹 사이트를 만들고자 노력합니다. 그러나 이를 가능하게 하는 데는 웹 표준화를 준수하는 것이 중요한 역할을 합니다. 웹 표준화는 웹 개발에서 필수적인 원칙으로, 왜 그렇게 중요한지 살펴보겠습니다. 1. 다양한 플랫폼 및 브라우저 호환성 웹 표준을 준수하면 웹 사이트가 다양한 브라우저와 플랫폼에서 일관되게 표시됩니다. 이는 사용자들이 어떤 브라우저나 기기를 사용하더라도 웹 사이트에 쉽게 접근하고 사용할 수 있음을 의미합니다. 웹 표준을 따르지 않으면 웹 사이트가 특정 브라우저에서만 제대로 작동하거나 일부 기기에서만 보이는 문제가 발생할 수 있습니다. 2. 검색 엔진 최적화 .. 2023. 9. 11. 웹 디자인의 핵심 원칙과 트렌드 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 1. 웹 디자인의 기본 원칙 UI vs. UX 디자인: 사용자 인터페이스 (UI)와 사용자 경험 (UX) 디자인의 차이 및 중요성에 대한 설명. Responsiveness: 모바일 및 데스크톱 장치에서 웹 사이트가 어떻게 동작해야 하는지에 대한 가이드. 칼러 팔레트와 타이포그래피: 웹 사이트의 시각적 요소를 개선하기 위한 적절한 색상 및 글꼴 선택 방법. 2. 웹 디자인 트렌드 플랫 디자인 vs. 스케머 디자인: 각 스타일의 특징과 언제 사용해야 하는지에 대한 비교. 애니메이션 및 마이크로 인터랙션: 사용자의 관심을 끌기 위해 웹 사이트에 애니메이션과 마이크로 인터랙션을 적용하는 방법. 다크 모드: 웹 사이트에 어.. 2023. 9. 11. 시작일/종료일을 선택하는 DatePicker 구현하기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 1. HTML 구성 먼저 HTML 파일을 생성하고 DatePicker를 위한 두 개의 입력 필드를 추가합니다. 시작일: 종료일: 2. JavaScript로 DatePicker 동작 추가 이제 JavaScript를 사용하여 DatePicker를 동작하게 만들어 보겠습니다. 아래의 코드는 시작일과 종료일 간의 유효성을 검사하고, 종료일이 시작일보다 이후인 경우 경고를 표시합니다. document.addEventListener("DOMContentLoaded", function () { const startDateInput = document.getElementById("start-date"); const endDate.. 2023. 9. 5. 서비스의 효율성 향상을 위한 UX 원칙 1. 사용빈도가 높거나 중요한 기능은 바로 접근할 수 있어야 합니다. 사용자 행동과 사용 맥락에 대한 이해를 바탕으로 사용자가 자주 쓰거나 중요한 기능 및 정보에 대해 즉시 접근할 수 있도록 디자인해야 합니다. 대표적인 예시는 단축 실행 방법인 숏컷(Shortcut)과 단축키입니다. 사용빈도가 높은 기능이나 정보를 상위 항목에서 제공하면, 탐색을 줄여 효율적인 접근이 가능해집니다. [이미지 3]은 대표적인 지도 앱인 ‘TMap’과 ‘네이버지도’의 메인 화면인데요. 화면 하단에는 사용자가 자주 검색한 목적지 리스트를 사용 빈도 및 최신성에 기반해 우선순위로 추천합니다. 여행이나 출장과 같이 특별한 이벤트에는 새로운 장소를 검색하기도 하지만, 주로 사용자는 자주 검색했던 장소로 다시 이동하는 경우가 많습니다.. 2023. 1. 9. 플러그인 예제 모음 ChartJS : https://jsfiddle.net/y82r56un/200/ DatePicker : https://jsfiddle.net/w8ajceuf/2/ 2022. 11. 11. [jQuery] 제이쿼리로 Roulette(룰렛) 이벤트 구현하기 룰렛 스타일의 이벤트는 사용자에게 재미와 흥미를 제공하는 데 유용합니다. jQuery를 사용하여 이미지를 돌리는 간단한 룰렛 이벤트를 만들어보겠습니다. 1. HTML 구조 먼저 HTML 구조를 설정합니다. 룰렛 이미지와 시작 버튼을 포함하는 간단한 구조를 만듭니다. 시작 2. CSS 스타일링 이미지와 버튼의 스타일을 원하는대로 추가합니다. 'styles.css' 파일을 사용하여 스타일링합니다. /* styles.css */ .roulette-container { text-align: center; } .roulette { width: 300px; transition: transform 5s ease-in-out; } #start-button { font-size: 18px; padding: 10px 20.. 2021. 11. 19. 휴대폰/디바이스 별 해상도 / Galaxy 폴더폰 해상도 / Galaxy Flip 3 / Galaxy Fold 3 해상도 휴대폰 및 디바이스 별 일반적인 해상도 Apple Products iPhone Pixel Size Viewport iPhone XR 828 x 1792 414 x 896 iPhone XS 1125 x 2436 375 x 812 iPhone XS Max 1242 x 2688 414 x 896 iPhone X 1125 x 2436 375 x 812 iPhone 8 Plus 1080 x 1920 414 x 736 iPhone 8 750 x 1334 375 x 667 iPhone 7 Plus 1080 x 1920 414 x 736 iPhone 7 750 x 1334 375 x 667 iPhone 6 Plus/6S Plus 1080 x 1920 414 x 736 iPhone 6/6S 750 x 1334 375 x.. 2021. 11. 18. [jQuery] 플러그인 없는 아코디언 Accordion 부트스트랩이나 플러그인을 사용하지 않은 아코디언 입니다. css에서 이미지를 변경하여 화살표를 바꿀 수 있으며, 다른 조건을 주어서 js를 수정할 수 있습니다. 2021. 10. 18. [JS] 스크롤 진행률 표시줄 / scroll indicator pixels와 pageHeight값으로 현제 사용하는 값을 구한 후 progress로 100%수치로 전환 시킨다. 추가적으로 실제 텍스트로 보여질 수치는 소수점을 잘라서 표기한다. 2021. 6. 7. [jQuery] 제이쿼리 keyup 숫자만 입력 가능한 input input에 type="number"가 아닌 text로 숫자만 입력이 가능하게, keyup()메소드를 이용하여 val()값이 숫자가 아닌 다른 값이 들어올 경우 replace(/[^0-9]/g, "")를 이용하여 필터링 하는 방식입니다. 선택자는 별도로 변경하셔서 커스텀으로 사용할 수 있습니다. 2021. 4. 19. [JS] Input 검색 필터 / 검색 창 만들기 (복제), input 검색 딜레이 / 검색 필터 딜레이 전에 Input 검색 필터 생성버전으로 추가하는 형식이였다. 이번 방식은 #searchBox에 있는 #noResult를 clone()메소드를 이용하여 생성하는 방식이다. 앞에 게시물에 추가하지 못했던 검색 시 딜레이를 추가하여 제작했다. 검색 시 딜레이를 주지 않으면, 타이핑을 칠때마다 js를 읽기 때문에, 딜레이를 주어서 타이핑이 끝날때 js를 읽도록 하는 방식입니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 19. [JS] Input 검색 필터 / 검색 창 만들기 (생성) input에 keyup 메소드로 위아래 방향키와 엔터를 눌렀을때 이벤트가 발생되도록 했습니다. nav클래스는 데이터를 불러오기위해 숨겨놓고 input에서 타이핑 시 val값을 가져와 데이터와 매핑을 한 후 append로 searchBox에 생성되는 형식입니다. 더불어 한글을 사용 할 경우 length를 이용해 2개나 3개 이상 타이핑 시 검색을 할 수 있게 if문을 사용 했습니다. 검색 가능한 Text Source Commits Branches Pull requests Pipelines Deployments Jira issues Downloads 2021. 4. 15. [CSS] 커스텀 셀렉트박스 디자인 / Custom Select Design 기존 셀렉트 박스는 노멀하게 사용이 가능하지만 핸들링 및 디자인이 어렵게 되있는 단점이 있습니다. 그렇기 때문에 위처럼 커스텀마이징으로 셀렉트 박스를 이용하는 경우가 있습니다. 2021. 2. 24. [JS] Table input checkbox All click / 테이블 전체 체크 테이블 에서 를 전체 체크하거나 해제하는 방법입니다. 테이블해더의 인풋을 클릭하면 전체 체크가 되며 테이블바디의 인풋을 클릭 시에도 전체체크 헤제 및 선택이 가능합니다. 2021. 2. 22. 이전 1 2 3 다음
