[ 피그마 ] 초간단! 피그마 프로토타입 만들기# 1.프로토타입의 개념과 필요성 프로토타입은 사용자가 실제 제품처럼 느끼도록 하는 인터랙티브 목업입니다. 피그마에서는 디자인과 프로토타입을 한곳에서 관리할 수 있어, 반복 작업 없이 즉시 인터랙션을 연결하고 실시간으로 피드백을 받을 수 있습니다. 특히 협업 중 실시간 코멘트 기능과 브라우저 기반 공유 링크 덕분에 개발자·디자이너 간 의사소통 속도가 크게 향상됩니다. 이번 포스팅에서는 프로토타입을 만들어보도록 하겠습니다. ✅ 도움될만한 포스팅 [정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기 [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기이번 포스팅에서는 피그마에서 자주쓰는 단축키를 종류별로 모아보도록 하겠..

[ 피그마 ] 초간단! 아이콘(ICON) 만들기 디자인 시스템에서 빠질 수 없는 것이 바로 ‘아이콘’입니다. 오늘은 피그마(Figma)를 사용해 누구나 따라 할 수 있는 초간단 아이콘 제작 과정을 단계별로 알아보도록 하겠습니다. 실무에 바로 적용할 수 있도록 기초 설정부터 내보내기까지 꼼꼼히 다뤄보겠습니다. # 1.작업 파일 세팅1) 프레임(Frame) 설정 F 키를 눌러 24×24 px 또는 32×32 px 프레임을 만듭니다. 아이콘 세트는 보통 동일한 캔버스 크기를 유지해야 일관성을 지킬 수 있습니다. 그리드(Grid)를 4 px 간격으로 설정하면 정렬이 더욱 수월해집니다. 이번 포스팅에선 관리자 화면에서 쓰일 아이콘을 만들어 보겠습니다. # 2.아이콘 기본 도형 그리기1) 도형 툴 활용 O (..

Model Context Protocol (MCP) 쉽게 이해하기 MCP(Model Context Protocol)는 LLM 애플리케이션과 외부 데이터 소스 및 도구 간의 원활한 통합을 가능하게 하는 개방형 프로토콜입니다. 이번 포스팅에서는 요즘 가장 핫한 주제인 MCP의 주요 개념, 아키텍처, 구성 요소 및 구현 방법에 대해 다루도록 하겠습니다.✅  각종 팁 모음 [ 엑셀 ] 구글 스프레드시트 자주쓰는 함수 정리 (PDF 공유) [ 엑셀 ] 구글 스프레드시트 자주쓰는 함수 정리 (PDF 공유)구글 스프레드시트는 강력한 데이터 분석 도구로, 다양한 함수를 통해 복잡한 작업도 간단하게 처리할 수 있습니다. 이번 포스팅에서는 구글 스프레드시트에서 자주 사용하는 함수들을 소개하it-ability.tistory..

[ 피그마 ] 초간단! 이미지 누끼 따기 피그마 작업중 이미지 의 누끼를 따는 작업이 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.  해당 내용은 펜을 이용한 벡터 마스크(Vector Mask) 활용 방법 과 클리핑 마스크(Clipping Mask) 활용 , 그리고 플러그인을 활용한 자동 배경 제거 를 포함 하고 있습니다! # 1. 벡터 마스크(Vector Mask) 활용  벡터 마스크는 벡터 셰이프(Vector Shape) 를 이용해 이미지의 특정 부분을 가리거나 표시하는 방식입니다.즉, 벡터 도형이 마스크 역할을 하여 이미지의 보이는 영역을 조정하는 기능입니다. ① 피그마에서 이미지를 불러오기오늘 사용할 이미지 를 불러옵니다. 화이트 데이를 맞아 핑크핑크한 하트풍선 이..

[ 피그마 ] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)  피그마 작업중 이미지를 도형모양으로 넣는 프로필 UI 가 필요하게 되었습니다.  빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.  해당내용은 포토샵의 클리핑 마스크, 피그마에서는 마스킹 을 응용한 방법입니다. # 1.클리핑 마스크 란? ( Clipping Mask )  클리핑 마스크(Clipping Mask) 는 특정 도형(Shape)을 기준으로 이미지 또는 오브젝트의 특정 부분만 보이도록 잘라내는 기능입니다. 예를 들어, 이미지를 원형으로 자르거나, 텍스트 안에 이미지를 넣을 때 활용할 수 있습니다.    # 2.피그마에서 적용하기 - 이미지 가져오기  1) 하단에서 Image/video ... ..

[ 피그마 ] 초간단! 표 (테이블 table) 만들기 피그마 작업중 테이블 UI 가 필요하게 되었습니다.  빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.  해당내용은 오토레이아웃을 응용한 방법입니다. # 1.네모박스 및 표 셀 만들기 이번 작업을 위해 네모 박스를 하나 그려줍니다.  1) 하단에서 네모 박스 선택  2) 원하는 크기의 박스 만들기    전 220 X 60 사이즈로 만들었습니다.  3) 박스 아웃라인 설정하기 박스를 만들었으니, 박스 테두리를 만들어줍니다. 박스 색상 변경은 Fill 에서 하시면되고, 테두리는 Stroke 에서 하시면 됩니다.Center 옵션으로 만드시면 됩니다.  4) 텍스트 박스 만들기  텍스트를 클릭후 아까 만든 박스안에 위치를 지정하고, 원하는 텍스트를 ..

2025년 파이썬으로 도전해볼 만한 AI · Data 토이 프로젝트 20선인공지능과 데이터 분석이 여전히 폭발적인 화두로 떠오르는 2025년, 파이썬(Python)은 여전히 가장 매력적인 언어로 꼽히고 있습니다.특히 토이 프로젝트(Toy Project)는 새로운 기술을 배우고 실습하기에 최적의 형태이므로, 짧은 기간 안에 집중해서 배울 수 있고 결과물도 확인하기 좋습니다. 이번 글에서는 파이썬으로 진행하기 좋은 AI · Data 토이 프로젝트 20가지를 소개합니다.프로젝트명, 간단한 설명, 사용할 주요 알고리즘 및 라이브러리를 함께 제시하여 여러분이 무엇부터 어떻게 시작하면 좋을지 방향을 잡아드립니다.목차1. 뉴스 기사 요약 봇2. 감정 분석 챗봇3. 이미지에서 텍스트 추출 & 번역4. 날씨 예측 미니 ..

# 1. HTML에서 이모지(Emoji) 삽입하는 방법 1. 이모지란 무엇인가?😊이모지(Emoji)는 감정을 시각적으로 표현할 수 있는 작은 아이콘입니다. 사용자가 웹 페이지에서 보다 친근하게 느끼도록 하며, 간단한 텍스트보다 효과적으로 메시지를 전달할 수 있습니다. 이번 글에서는 HTML에서 이모지를 삽입하는 다양한 방법을 알아보겠습니다.  2. HTML에서 이모지 삽입 방법1) 유니코드(Unicode) 사용유니코드는 이모지를 포함한 다양한 문자에 대한 고유 코드입니다. 이를 HTML에서 활용하면 손쉽게 이모지를 삽입할 수 있습니다. 아래는 예제 코드입니다.😊 유니코드를 활용한 이모지 예제입니다. 코드에 사용된 "😊"는 유니코드로 U+1F60A에 해당합니다. 이를 HTML에서 사용하려면 다음과 같..

이 포스팅에서는 선형대수의 기초 개념인 선형 방정식 시스템과 행렬 변환에 대해 다룹니다. 행렬 형태의 방정식, RREF(완전 계단식 형태), 벡터 방정식 및 부분 공간 개념을 단계별로 설명하며, 예제를 제공합니다. 수학 및 공학 기초 지식을 향상시키고 학습에 도움을 주는 포스팅입니다. # 1. 선형대수의 선형 방정식Linear Equations in Linear Algebra ( 선형대수의 선형 방정식 ) 1.1 Systems of Linear Equations (선형 방정식의 시스템) 선형 방정식의 정의 선형 방정식은 다음과 같은 형태를 가집니다. $$a_1x_1 + a_2x_2 + \cdots + a_nx_n = b$$ 여기서 $a_1, a_2, \ldots, a_n$은 상수(계수), $b$는..

Ubuntu 20.04에서 Nginx를 설치하고 웹 서버로 설정하는 방법을 알려드리겠습니다. 이 포스팅은 Nginx를 처음 사용하거나 웹 서버 환경을 구성하는 데 익숙하지 않은 사용자도 쉽게 따라할 수 있도록 상세히 설명하는 것에 초점을 두었습니다.  다른 개발환경 세팅에 대해 궁금하시다면 아래 포스팅을 같이 참고해주세요 ✅  개발환경 세팅 정리[ SpringBoot ] Visual Studio Code 에서 스프링부트 개발환경 세팅 [ React ] 리액트 개발환경 구축[ 유니티 ] 맥북 M1 유니티 개발환경 세팅 [ AI ] Windows에서 딥러닝 개발 환경 구축    # 1. Nginx 란? Nginx 란? Nginx는 HTTP 및 Reverse Proxy 기능을 제공하는 고성능 웹 서버입니다. ..