AMoon - 개발자의 각종 개발 정보 공유

[ UX/UI ] 토글(Toggle) UX 용어 정리 - 개념,예제

Rio - Moon — Tue, 15 Jul 2025 11:37:12 +0900

[ UX/UI ] 토글(Toggle) UX 용어 정리 – 개념, 예제

UX/UI 디자인에서 토글 스위치는 UI에서 가장 자주 등장하는 인터페이스 중 하나입니다.

특히 모바일 앱이나 설정 화면에서 “ON/OFF”, “활성/비활성” 같은 단순한 조작을 손쉽게 구현할 수 있어 UX 측면에서 매우 유용한 컴포넌트라고 볼 수 있습니다.

이번 포스팅에서는 토글이란 무엇인지, 그리고 UX/UI 설계에서 토글을 구성하는 핵심 요소들에 대해 상세히 정리해보겠습니다.

✅ 각종 팁 모음

[정보공유 같이해요/Terms] - [ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제

[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제

[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제 UX/UI 디자인에서 버튼은 가장 중요한 요소 중 하나입니다. 이번 포스팅에서는 버튼의 유형, 상태, 인터랙션, 디자인 원칙을 정리하고, UX에서

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석 ) 최근 인공지능 기술의 눈부신 발전과 함께, 이미지 생성 도구들이 급격히 발전하고 있습니다. 디자이너, 마케터,

it-ability.tistory.com

[정보공유 같이해요/Terms] - 2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )

2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )

# 1. UI, UX 용어 총정리 UI (User Interface) 사용자가 디지털 제품(웹, 앱 등)이나 기기를 사용할 때 직접 눈으로 보고, 손으로 조작하는 화면이나 조작 요소를 의미합니다. 예시: 웹사이트의 버튼,

it-ability.tistory.com

[정보공유 같이해요/Trend] - [ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천

[ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천

웹 개발 또는 화면 기획을 할때 화면 설계는 빼놓을 수 없는 작업입니다. 이번 포스팅에서는 현업에서 많이 쓰이는 다양한 종류의 UI / UX 프로토타이핑 툴 을 소개하도록 하겠습니다. 목차 1. Figma

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024

[ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024

웹 개발자는 사용자가 접하는 인터페이스를 가장 효과적으로 구현하는 중요한 역할을 담당합니다. 그러나 단순히 기능적인 웹사이트를 넘어서, 아름답고 직관적인 UI(User Interface)를 구현하는 것

it-ability.tistory.com

1. 토글(Toggle)이란?

토글(Toggle)은 사용자 인터페이스(UI)에서 두 가지 상태(예: ON/OFF, 활성/비활성 등)를 전환하는 데 사용되는 스위치 형태의 UI 컴포넌트입니다.
사용자는 클릭, 탭 등의 상호작용을 통해 상태를 전환하며, 일반적으로 스위치 모양 또는 텍스트 버튼 형태로 나타납니다.

언제 토글을 사용하나요?

✅즉시 적용되는 설정 (예: 알림 켜기/끄기)

✅서로 배타적인 상태 전환 (예: 다크 모드 ON/OFF)

✅단일 선택지의 유무 판단 (예: 위치 서비스 허용)

반면, 여러 옵션 중 하나를 선택할 땐 라디오 버튼 이나 드롭다운 이 적합합니다.

2. 토의 주요 요소

스위치 토글 (Switch Toggle)

✅ 대표적인 On/Off 스위치

세그먼트 컨트롤 (Segmented Control)

✅ 관련된 옵션들 중 하나를 선택하는 토글

탭 바(Tab Bar)

✅ 앱의 메인 네비게이션용 하단 탭

라디오 버튼(Radio Button)

✅ 여러 옵션 중 하나만 선택

체크박스 (Checkbox)

✅ 여러 옵션을 독립적으로 선택

즐겨찾기 토글(Favorite Toggle)

✅ 하트 아이콘으로 즐겨찾기 추가/제거

아코디언(Accordion)

✅ 콘텐츠를 접고 펼치는 토글

드롭다운(Dropdown)

✅ 옵션 목록을 토글하여 선택

3. 토글 선택 가이드

토글 선택 가이드라인

토글 가이드라인

4. UX에서 토글 사용 시 고려할 점

상태가 즉시 적용되는 경우만 사용

✔️ 저장 버튼이 필요한 경우엔 토글보다 체크박스나 버튼이 적절합니다.

라벨은 상태를 설명해야 함

✔️ ON/OFF 대신 "알림 켜기", "다크 모드 사용"처럼 현재 상태를 반영하는 문구로 구성해야 혼동을 줄일 수 있습니다.

시각적 명확성 확보

✔️ 색상, 위치, 애니메이션 등을 활용하여 현재 상태를 명확히 보여줘야 합니다.

6. 관련 UI 컴포넌트 – 버튼,폼,툴팁 UX 용어 정리

토글은 다양한 UI 컴포넌트와 함께 사용됩니다.

버튼: 모든 토글을 ON 해야 버튼이 활성화되는 UX 패턴이 자주 활용됩니다.

[버튼 UX 용어 정리] 글에서 더 자세히 알아보세요!

폼: 선택적 입력 필드를 열거나 닫는 조건부 제어로 사용됩니다.

[폼 UX 용어 정리] 글에서 더 자세히 알아보세요!

툴팁: 토글 기능에 대한 추가 설명을 제공하는 보조 요소로 함께 배치됩니다.

[툴팁 UX 용어 정리] 글에서 더 자세히 알아보세요!

[ UX/UI ] 툴팁(Tooltip) UX 용어 정리 – 개념, 예제

Rio - Moon — Mon, 14 Jul 2025 17:41:14 +0900

툴팁 배너

[ UX/UI ] 툴팁(Tooltip) UX 용어 정리 – 개념, 예제

UX/UI 디자인에서 툴팁(Tooltip)은 사용자의 이해를 돕기위한 요소입니다. 이번 포스팅에서는 툴팁의 요소가 무엇인지, 그리고 실무에서는 어떤식으로 쓰이는지 정리해보도록 하겠습니다.

✅ 각종 팁 모음

[정보공유 같이해요/Terms] - [ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제

[ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제

[ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제 UX/UI 디자인에서 폼(Form)은 사용자 입력을 처리하는 중요한 요소입니다. 이번 포스팅에서는 폼의 주요 요소, 입력 필드 유형, 오류 메시지, UX 최적화

it-ability.tistory.com

[정보공유 같이해요/Terms] - [ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제

[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )

it-ability.tistory.com

[정보공유 같이해요/Terms] - 2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )

2025 꼭 알아야할 UI / UX 관련 용어 총정리 ( 지속적인 업데이트 예정 )

it-ability.tistory.com

[정보공유 같이해요/Trend] - [ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천

[ 프론트엔드 ] UI/UX 프로토타이핑 툴 7종 추천

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024

[ 프론트엔드 ] 웹 개발자를 위한 필수 UI/UX 레퍼런스 사이트 5 종 모음 2024

it-ability.tistory.com

1. 툴팁(Tooltip) 이란?

툴팁(Tooltip)이란 마우스 커서 또는 터치 인터페이스에서 손가락을 특정 요소 위에 올렸을 때 나타나는 작은 팝업 메시지로, 사용자가 인터페이스의 특정 기능이나 요소를 쉽게 이해할 수 있도록 도와주는 UI 컴포넌트입니다.

툴팁은 사용자가 해당 기능을 명확히 이해하지 못할 때, 직관적으로 설명을 제공함으로써 사용자 경험(UX)을 크게 개선할 수 있습니다.

2. 툴팁의 유형

텍스트 기반 툴팁(Text Tooltip)

위쪽 툴팁

아래쪽 툴팁

왼쪽 툴팁

오른쪽 툴팁

✅ 간단하고 명확한 정보 전달

✅ 빠른 로딩과 최소한의 리소스 사용

✅ 일관된 디자인과 사용자 경험

리치 툴팁(Rich Tooltip)

프로필 툴팁

설정 툴팁

평점 툴팁

✅ 시각적으로 풍부한 정보 제공

✅ 이미지, 아이콘, 스타일링된 텍스트 포함

✅ 더 많은 컨텍스트와 상세 정보 전달

인터랙티브 툴팁(Interactive Tooltip)

액션 메뉴 툴팁

평점주기 툴팁

미디어플레이어 툴팁

✅ 클릭 가능한 버튼과 링크 포함

✅ 폼 입력 요소와 상호작용

✅ 툴팁 내에서 작업 완료 가능

✅ 사용자 경험의 연속성 제공

3. UX에서 툴 설계 시 고려할 점

명확하고 간결한 메시지

✔️ 툴팁은 짧고 명료한 메시지로 구성해야 합니다. 불필요한 설명이나 긴 문장은 오히려 사용자를 혼란스럽게 할 수 있습니다.

한 문장이나 간단한 단어로 요약하는 것이 효과적입니다.

좋은 예시

"파일 업로드"
"삭제하기"
"프로필 편집"

일관성 있는 디자인

✔️ 전체 인터페이스와 조화를 이루는 일관된 디자인을 유지하는 것이 중요합니다. 툴팁의 크기, 색상, 위치 등 디자인 요소를 일관되게 관리하여 사용자에게 혼란을 주지 않아야 합니다.

적절한 타이밍과 위치

✔️ 툴팁은 사용자가 필요로 하는 순간 적절한 위치에 나타나야 합니다. 너무 빨리 나타나거나 너무 늦게 나타나면 사용자 경험이 저하될 수 있습니다. 일반적으로 커서를 올린 후 0.3~0.5초 후에 표시되는 것이 적절합니다.

접근성(Accessibility) 고려

✔️ 모바일 환경을 포함한 다양한 기기에서 접근성을 고려하여 디자인해야 합니다.

모바일 기기에서는 터치를 통한 툴팁이 명확하게 나타나도록 디자인하고, 화면 크기나 해상도에 따라 명확히 표시되도록

반응형으로 구현해야 합니다.

4. 실제 적용 예시

구글 ( Google )

구글

이메일

네이버 ( Naver )

네이버

삼성증권 차트 ( Samsung Chart )

주식 차트

5. 관련 UI 컴포넌트 – 버튼 ( Button ) UX 용어 정리

툴팁은 버튼과 함께 동작하는 경우가 많습니다. 예를 들어, 사용자가 버튼에 마우스오버를 하면 활성화되는 UX 패턴이 존재합니다.

[버튼 UX 용어 정리] 글에서 더 자세히 알아보세요!

[ Terminal ] CLI(명령어 터미널) 기초 완벽 사용법 가이드

Rio - Moon — Fri, 4 Jul 2025 16:51:58 +0900

[ Terminal ] CLI(명령어 터미널) 기초 완벽 사용법 가이드

# 1.CLI(명령어 터미널) 란 무엇인가?

1) CLI 의 정의

CLI(Command Line Interface)란, 키보드로 명령어를 입력해 컴퓨터를 제어하는 방식입니다.

GUI(그래픽 사용자 인터페이스)와 달리 직접 명령을 입력해야 하지만, 속도가 빠르고 정밀한 작업이 가능합니다.

2) CLI 를 사용하는 이유

속도: 마우스보다 빠르게 작업 가능
자동화: 스크립트로 반복 작업 가능
서버 환경 필수: 대부분 서버는 CLI로만 조작 가능

그 외에 다른 명령어 에 대해 궁금하시면 아래 포스팅을 같이 참고해주세요

✅ 명령어 정리

[개발 같이해요] - [ Linux ] 리눅스 명령어 모음 총정리 ( 파일 관리, 프로세스, 네트워크 등 )

[ Linux ] 리눅스 명령어 모음 총정리 ( 파일 관리, 프로세스, 네트워크 등 )

리눅스(Linux)는 오픈 소스 기반의 운영체제로, 서버부터 데스크톱, 임베디드 시스템까지 널리 사용됩니다. 리눅스의 강력함은 명령어 기반의 작업에서 나옵니다. 이번 포스팅에서는 리눅스를 사

it-ability.tistory.com

[개발 같이해요] - [ Vim ] vim 명령어 총정리 ( 파일 탐색, 편집, 검색 등 )

[ Vim ] vim 명령어 총정리 ( 파일 탐색, 편집, 검색 등 )

이번 포스팅에서는 vim 명령어를 총정리 해보도록 하겠습니다. # 1. Vim 모드Vim은 3가지 주요 모드로 나뉩니다.명령 모드: 기본 모드, 명령어를 입력할 수 있음.입력 모드: 텍스트를 입력할 수

it-ability.tistory.com

[개발 같이해요] - [ nodejs ] 노드 명령어 총정리 모음 ( 프로젝트 생성, 패키지 관리, 실행 및 디버깅 등 )

[ nodejs ] 노드 명령어 총정리 모음 ( 프로젝트 생성, 패키지 관리, 실행 및 디버깅 등 )

이번 포스팅에서는 Node.js에서 자주 사용하는 명령어 및 CLI(Command Line Interface) 명령어를 정리해 보도록 하겠니다. 다른 게시글 구경하기 ✅ 명령어 관련 게시글 [ Vim ] vim 명령어 총정리 ( 파

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ docker ] 도커 개념 및 실행하는 법 , 명령어 모음 ( docker run 등 )

[ docker ] 도커 개념 및 실행하는 법 , 명령어 모음 ( docker run 등 )

Docker 개념 및 실행하는법 , 그리고 명령어 완벽정리함께보면 좋은글✅ 명령어 [개발 같이해요] - [ Vim ] vim 명령어 총정리 ( 파일 탐색, 편집, 검색 등 ) [ Vim ] vim 명령어 총정리 ( 파일 탐색, 편

it-ability.tistory.com

# 2.CLI 시작하기 ( 실습준비 )

1) 운영체제별 터미널 프로그램

운영체제	터미널 프로그램
Windows	CMD, PowerShell, Windows Terminal
MacOS	Terminal 앱
Linux	기본 Terminal

2) 터미널 열기 & 기본 구조 이해

터미널을 열면 아래와 같은 화면이 나타납니다

user@hostname:~$

user : 현재 사용자명
hostname : 컴퓨터 이름
~ : 현재 디렉토리 (홈 디렉토리)
$ : 명령어 입력 위치

# 3.자주 사용하는 CLI 기본 명령어

1 디렉토리/파일 관련 명령어

ls: 현재 디렉토리의 파일 목록 보기
예제:

ls

cd \[경로\]: 디렉토리 이동
예제:

cd Documents

pwd: 현재 경로 확인
예제:

pwd

mkdir \[폴더명\]: 새 폴더 만들기
예제:

mkdir my_folder

touch \[파일명\]: 새 파일 만들기 (Linux/Mac)
예제:

touch file.txt

2 파일/디렉토리 관리 명령어

cp \[원본\] \[대상\]: 파일/폴더 복사
예제:

cp file.txt backup.txt

mv \[원본\] \[대상\]: 파일/폴더 이동 또는 이름 변경
예제:

mv file.txt new_file.txt

rm \[파일명\]: 파일 삭제
예제:

rm file.txt

⚠️ 주의: rm -rf [폴더]는 매우 위험하니 신중 사용

3 시스템 정보 확인 명령어

whoami: 현재 로그인한 사용자명 확인
예제:

whoami

date: 현재 날짜와 시간 출력
예제:

date

uname -a: 운영체제 및 커널 정보 확인
예제:

uname -a

4 추가 추천 명령어 모음 (더 알아두면 좋은 명령어)

✅ 운영체제별 명령어 차이

작업	Mac / Linux 명령어	Windows CMD / PowerShell 명령어
디렉토리 목록 보기	ls	dir (CMD) / ls (PowerShell 가능)
현재 경로 확인	pwd	cd (경로 표시)
디렉토리 이동	cd	cd
새 디렉토리 생성	mkdir	mkdir
새 파일 생성	touch file.txt	echo > file.txt (CMD) / New-Item file.txt (PowerShell)
파일 복사	cp	copy (CMD) / cp (PowerShell 가능)
파일 이동/이름 변경	mv	move (CMD) / mv (PowerShell 가능)
파일 삭제	rm	del (CMD) / Remove-Item (PowerShell)
디스크 공간 확인	df -h	wmic logicaldisk get size,freespace,caption (CMD) / Get-PSDrive (PowerShell)

참고사항

Mac / Linux 명령어는 대부분 동일합니다.

Windows는 PowerShell에서 일부 Linux 명령어(ls, cp 등) 지원하지만, 완벽히 같진 않습니다.

Linux 명령어를 Windows에서 쓰고 싶다면 WSL(Windows Subsystem for Linux) 또는 Git Bash 사용을 추천합니다.

echo: 문자열 출력

echo Hello World

cat: 파일 내용 출력

cat file.txt

rmdir: 빈 디렉토리 삭제

rmdir empty_folder

find: 파일/디렉토리 검색

find . -name "file.txt"

grep: 문자열 검색

grep "error" log.txt

head: 파일의 처음 몇 줄 출력

head -n 5 file.txt

tail: 파일의 마지막 몇 줄 출력

tail -n 5 file.txt

chmod: 파일 권한 변경

chmod 755 script.sh

chown: 파일 소유자 변경

sudo chown user:user file.txt

zip: 파일 압축

zip archive.zip file.txt

unzip: 압축 해제

unzip archive.zip

tar: 파일 압축/해제

tar -czvf archive.tar.gz folder/

df: 디스크 공간 확인

df -h

du: 디렉토리/파일 용량 확인

du -sh folder/

# 4.초보자를 위한 터미널 활용 팁

1 자동완성 (Tab 키)

명령어, 파일명 자동완성 가능 → 입력하다 Tab 키 눌러보세요!

cd Doc[TAB]  # 'Documents'로 자동완성

2 명령어 히스토리 (↑, ↓ 키)

이전에 입력한 명령어를 불러와서 재사용 가능

3 복사/붙여넣기 방법

Windows: 우클릭 or Ctrl + Shift + C/V
Mac/Linux: Ctrl + Shift + C/V or 터미널 설정에 따라 다름

텍스트 복사 후 터미널에 붙여넣기

mkdir my_folder

4 경로 빠르게 이동하는 법

.. : 상위 폴더로 이동
~: 홈 디렉토리로 이동

cd ..     # 상위 폴더로 이동
cd ~      # 홈 디렉토리로 이동

# 5.CLI 활용을 연습할 수 있는 추천 방법

1 추천 실습 사이트

cmdchallenge.com

2 직접 해볼만한 미션

새 폴더 만들고, 파일 생성 → 복사 → 삭제까지 직접 실습해보기

mkdir my_folder
cd my_folder
touch my_file.txt
cp my_file.txt my_file_copy.txt
rm my_file.txt my_file_copy.txt
cd ..
rmdir my_folder

# 6.마무리

CLI는 초보자에게 어렵게 느껴질 수 있지만, 천천히 따라 하면 반드시 익숙해질 수 있습니다.

" 명령어 모르면 구글 검색 " 이 최고의 학습법이며, 작은 실습부터 꾸준히 반복해보세요!

각 명령어 사용 시, 반드시 실습 환경(개인 PC)에서 먼저 테스트 후 실제 업무 환경에 활용하세요.

thumbnail

[ AI ] 바이브코딩이란? 프롬프트로 코딩하는 신개념 개발 방식 완벽 정리

Rio - Moon — Thu, 3 Jul 2025 14:51:12 +0900

바이브코딩이란? 프롬프트로 코딩하는 신개념 개발 방식 완벽 정리

1. 바이브코딩(Vibe Coding)이란?

최근 개발자 커뮤니티를 중심으로 빠르게 확산 중인 바이브코딩(Vibe Coding)

이는 기존의 코딩 방식과는 완전히 다른 AI 기반 신개념 코딩 방법입니다.

한 줄 정의
프롬프트(Prompt)를 입력하면 AI가 코드를 자동으로 작성하고, 사용자는 이를 수정·보완해 개발을 완성하는 방식

즉, 개발자가 직접 코드를 일일이 작성하기보다는 AI가 자동으로 코드를 생성하고,
개발자는 그 코드를 검토,수정하며 프로젝트를 완성하는 흐름입니다.

2. 기존 코딩 방식과의 차이점

코드방식차이 표

바이브코딩의 핵심은 자연어 프롬프트입니다.
이제는 '프로그래밍 언어'보다 '프롬프트 언어'가 더 중요해지고 있습니다.

3. 바이브코딩 주요 특징

✅ 자연어 기반 개발

개발자는 영어 혹은 한국어 등의 자연어로 요구 사항을 작성합니다.
AI는 이를 이해해 해당 기능의 코드를 자동으로 생성합니다.

✅ AI가 코드 초안 생성

AI가 함수, 클래스, 전체 모듈 등을 작성합니다.
이 과정에서 문법, 라이브러리, API 사용법 등을 AI가 자동으로 처리합니다.

✅ 빠른 프로토타이핑 가능

아이디어를 빠르게 코드로 변환할 수 있어, MVP 개발이나 테스트용 코드를 만들기에 최적화되어 있습니다.

✅ 코드 리뷰 및 보완 중심 역할

개발자는 AI가 만든 코드를 점검하고, 필요한 수정이나 최적화 작업을 수행합니다.

4. 바이브코딩 장점과 활용 효과

▶️ 생산성 폭발적 향상

짧은 시간에 더 많은 코드를 작성 가능합니다. 단순 반복 작업은 모두 AI가 처리해 줍니다.

▶️ 개발 장벽 대폭 하락

비개발자도 어느 정도 개발이 가능합니다. ' 프로그래밍 언어 모르는 사람 ' 도 시작할 수 있습니다.

▶️ 개발자의 역할 변화

프롬프트 엔지니어링 능력 중요
코드 이해력, 리뷰 능력 강화 필요

▶️ 창의적 개발 가능성 확대

코딩 자체에 소모되는 에너지를 줄여 창의적인 문제 해결과 서비스 기획에 집중 가능

5. 대표적인 바이브코딩 툴

툴/플랫폼	주요 기능	특징
GitHub Copilot	코드 자동 완성	VS Code 연동, 높은 정확도
ChatGPT	대화형 AI 코딩	다양한 언어 지원, 상세 설명 가능
Replit AI	AI 기반 코드 생성	실시간 실행 환경 제공
Cursor IDE	AI 코딩 특화 IDE	고급 편집 기능, 팀 협업 지원
AWS CodeWhisperer	코드 추천	AWS 환경에 최적화, 보안 강화

6. 바이브코딩 활용법 & 팁

▶️ 프롬프트 작성 요령

명확하고 구체적인 요구사항을 작성할 것
동작 목적, 입력/출력, 예시 등을 포함
영어 프롬프트가 더 높은 정확도를 보이는 경우도 있음

▶️ 활용 시 주의사항

AI가 생성한 코드는 항상 검토 필수
보안 이슈, 라이선스 문제 점검 필요
중요한 프로젝트는 반드시 수동 코드 리뷰 병행

▶️ 추천 사용 시나리오

CRUD 앱 제작
테스트 코드 생성
코드 리팩토링
문서화 자동화

7. 앞으로의 개발 트렌드와 바이브코딩 전망

바이브코딩은 단순한 트렌드가 아닙니다. 이미 많은 개발자들이 실무에서 활용하고 있으며,
앞으로의 개발 시장을 바꿀 핵심 기술로 주목받고 있습니다.

✅ 미래 전망

프롬프트 엔지니어링 능력 필수화
프로그래머 → AI 코드 매니저 역할 변화
AI 중심 개발 환경 대중화

전문가 Tip
지금부터 바이브코딩을 연습하며
‘프롬프트 작성 능력’을 키우는 것이
곧 미래 개발자 생존 전략이 될 것입니다.

✅ 마무리

바이브코딩은 이제 선택이 아닌 필수 역량입니다.
프롬프트 한 줄로 코드를 생성하고, 그 위에 나만의 아이디어를 더하는 시대가 시작되었습니다.

오늘부터 가벼운 프로젝트부터 시작해보세요.
곧 빠르고 효율적인 개발의 즐거움을 느낄 수 있을 것입니다.

그 외에 파이썬의 연사자 와 함수 에 대해 궁금하시면 아래 포스팅을 같이 참고해주세요

✅ AI 툴 정리

[ AI 툴 ] 2025년 주목해야 할 AI 코딩 툴 TOP 10

인공지능(AI)은 코딩 및 개발 분야에서 점점 더 중요한 역할을 하고 있습니다. 특히, 코드 자동 완성, 디버깅, 문서화 등의 작업에서 AI 도구는 개발자들의 생산성을 획기적으로 높이고 있습니다.

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 검색엔진 도구 TOP 10

[ AI 툴 ] 2025년 주목할만한 AI 검색엔진 도구 TOP 10 최근 인공지능(AI) 기술의 비약적인 발전과 함께, 검색 엔진 분야에도 혁신적인 변화가 일어나고 있습니다. 단순한 키워드 기반 검색을 넘어,

it-ability.tistory.com

[ AI 툴 ] 2025년 주목해야 할 AI 일정 관리 & 스케줄링 툴 TOP 10

인공지능(AI)은 이제 에이전트 로 넘어가고 있습니다. 특히 시간 관리와 일정 조율은 생산성의 핵심 요소입니다. AI와 자동화 기능을 탑재한 다양한 도구들이 이러한 업무 부담을 덜어주며, 개

it-ability.tistory.com

✅ AI 정리

[ AI ] Model Context Protocol (MCP) 쉽게 이해하기

Model Context Protocol (MCP) 쉽게 이해하기 MCP(Model Context Protocol)는 LLM 애플리케이션과 외부 데이터 소스 및 도구 간의 원활한 통합을 가능하게 하는 개방형 프로토콜입니다. 이번 포스팅에서는 요즘

it-ability.tistory.com

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

Figma 라는 툴을 아시나요? Figma 는 UI/UX 프로토타이핑 작업에 용이한 툴 입니다.요즈음 디자인은 Figma 로 거의 다 대체되어가는 추세입니다. 그런 Figma 에 대항하는 툴이 나와서 소개

it-ability.tistory.com

✅ 개념 정리

[ AI ] 손실 함수와 비용 함수란 무엇인가? - 완벽 딥러닝 기초 개념 이해하기 시리즈

선형 회귀 모델을 훈련하기 위해서는 손실 함수(loss function)와 비용 함수(cost function)의 개념을 이해해야 합니다. 이 두 함수는 모델이 얼마나 잘 예측하는지를 평가하고, 최적의 모델을 찾아

it-ability.tistory.com

[ AI ] 선형 회귀란 무엇인가? - 완벽 딥러닝 기초 개념 이해하기 시리즈

# 1. 선형회귀란 무엇인가? 머신러닝과 딥러닝을 배우기 시작하면서 가장 먼저 접하게 되는 주제 중 하나가 바로 선형 회귀(Linear Regression)입니다.선형 회귀는 머신러닝 알고리즘 중에서 가

it-ability.tistory.com

[ AI ] 생성형 AI 란 무엇인가요?

요즘 뉴스를 보면 ChatGPT, DALL-E, Google Bard와 같은 생성형 인공 지능(AI) 시스템에 대한 언급을 자주 볼 수 있습니다. 이러한 혁신적인 AI 모델이 무엇을 할 수 있고 어떤 이점을 제공하는지 조금은

it-ability.tistory.com

thumbnail

소프트웨어 라이선스 종류와 차이점 완벽 정리

Rio - Moon — Tue, 1 Jul 2025 13:24:26 +0900

소프트웨어 라이선스 종류와 차이점 완벽 정리

1. 소프트웨어 라이선스란?

소프트웨어 라이선스는 소프트웨어를 어떻게 사용할 수 있는지에 대한 법적 조건을 의미합니다. 오픈소스 프로젝트를 사용할 때는 특히 이 라이선스를 잘 이해하고 준수해야 하며, 상업적 사용이 가능할지, 수정 후 재배포가 가능한지도 라이선스 종류에 따라 달라집니다.

2. 대표적인 소프트웨어 라이선스 정리

다음은 가장 많이 사용되는 소프트웨어 라이선스들의 특징을 정리한 표입니다.

라이선스명	허용 사항	의무 사항	상업적 이용	특징 요약
MIT	수정, 배포, 상업적 사용 가능	라이선스/저작권 고지 포함	✅ 가능	매우 자유로워 기업 선호
Apache 2.0	특허 보호 포함, 수정/배포 가능	고지 및 변경사항 명시	✅ 가능	특허 분쟁 방지, 자유도 높음
BSD 2/3-Clause	MIT와 유사	저작권 및 면책 조항 명시	✅ 가능	단순하고 유연함
GPL v2/v3	자유롭게 수정/배포 가능	소스코드 공개, 동일 라이선스 유지	✅ 가능	카피레프트 성격 강함
LGPL	링크 시 사용 허용	라이브러리 변경 시 공개 의무	✅ 가능	약한 카피레프트, 실용적
MPL 2.0	파일 단위 공개만 요구	수정된 파일만 공개	✅ 가능	유연하면서도 보호 기능 있음
EPL (Eclipse)	수정, 배포 가능	수정한 코드 공개	✅ 가능	기업용 소프트웨어 적합
Proprietary	사용만 가능	계약 조건 준수	✅ 가능(유료)	폐쇄형, 수정/배포 제한
Creative Commons (CC)	콘텐츠 공유에 사용	조건별로 상이	제한적 가능	코드보다 콘텐츠에 사용됨

3. 라이선스별 주요 비교 포인트

항목	MIT	Apache 2.0	GPL v3	LGPL	MPL 2.0
상업적 이용	✅	✅	✅	✅	✅
코드 수정	✅	✅	✅	✅	✅
재배포	✅	✅	✅	✅	✅
소스코드 공개	❌	❌	✅ (전체)	✅ (일부)	✅ (파일 단위)
특허 보호	❌	✅	✅	❌	❌
다른 라이선스와 병합	✅	✅	❌	조건부	조건부

4. 어떤 라이선스를 선택해야 할까?

4.1 MIT 라이선스

✅ 자유롭게 사용, 수정, 배포 가능
단, 라이선스 고지를 반드시 포함
✅ 상업적 사용 완전 허용

→ 스타트업, 기업 제품에서 많이 사용됩니다.

4.2 GPL 라이선스

✅ 강력한 오픈소스 보호
파생 소프트웨어도 반드시 소스코드 공개 필요
❗ 기업용에는 불리할 수 있음

→ 공공 프로젝트나 커뮤니티 기반 프로젝트에 적합합니다.

4.3 Apache 2.0 라이선스

✅ 특허 보호 포함, 기업 친화적
✅ 코드 수정/배포 용이

→ Google, AWS 등에서도 자주 사용, 안드로이드도 Apache 기반입니다.

4.4 LGPL

✅ 라이브러리용, 약한 카피레프트
✅ 상용 소프트웨어와 병행 가능

→ 오픈 라이브러리 제작 시 적합합니다.

4.5 MPL

✅ 수정한 파일만 공개, 나머지 비공개 가능
✅ 적절한 균형

→ 혼합 구조(오픈 + 상용) 제품에 적합

5. 라이선스 선택 시 체크리스트

상업적 목적이 있는가?
소스코드를 공개할 의향이 있는가?
특허 보호가 필요한가?
라이브러리인지, 전체 앱인지?

라이선스 선택은 단순히 "복사해서 붙여넣기"할 수 있는 문제가 아닙니다. 프로젝트의 목적과 미래 방향성에 따라 신중히 결정해야 합니다.

참고자료 및 도구

ChooseALicense.com – 라이선스 선택 도우미
TLDRLegal – 라이선스 요약 사이트
GitHub 공개 프로젝트 라이선스는 LICENSE 파일로 반드시 명시 필요

소프트웨어 개발을 하다 보면, 코드보다 라이선스가 더 중요한 순간이 생깁니다. 본 포스트가 여러분의 오픈소스 전략에 도움이 되기를 바랍니다.
궁금한 점은 댓글로 남겨주세요!

thumbnail

[ 피그마 ] 초간단! PDF 로 내보내기

Rio - Moon — Tue, 24 Jun 2025 10:50:38 +0900

[ 피그마 ] 초간단! PDF 로 내보내기

피그마 작업중 작업된 결과물을 PDF 로 내보내서 다른 사람과 공유 해야하는 일이 생겼습니다.

빠르고 쉽게 PDF 로 export 하는 방법을 같이 알아보도록 하겠습니다.

# 1.피그마 PDF 로 Export 하는 이유?

피그마에서 PDF 내보내기 하는 이유는 작업한 디자인을 다른 사람이 쉽게 확인할 수 있도록 표준 문서 형태인 PDF로 변환하는 것이 제일 큰 이유입니다. PDF 파일은 호환성이 뛰어나 모든 기기에서 동일하게 디자인을 확인할 수 있다는 장점이 있습니다.

# 2.피그마 PDF 내보내기 방법

1) PDF로 내보낼 디자인 선택하기

먼저 PDF로 내보낼 프레임 또는 페이지를 선택하세요.

여러 페이지를 선택하고 싶다면 Shift키를 누른 상태에서 클릭하여 선택합니다.

2) Export 옵션 열기

오른쪽 사이드 패널 하단에 있는 Export 섹션을 클릭하여 펼쳐줍니다.

+) 원하실경우 사이드바에서 + 버튼을 눌러 내보내기 설정을 추가합니다.

3) 파일 형식을 PDF로 설정하기

내보내기 설정 옵션에서 파일 형식을 선택할 때, 기본 설정인 PNG 대신 PDF를 선택합니다.

설정 예시: Format → PDF, Quality → Medium (기본)

4) PDF로 내보내기 실행하기

모든 설정이 완료되었다면, Export 버튼을 클릭하여 파일을 저장합니다

5) PDF 파일 확인

이렇게 각각 pdf 파일로 저장되있는 것을 확인 할 수 있습니다.

6) 프레임 여러개 하나의 PDF 파일 로 만들기

그렇다면, 여러개 프레임을 하나의 PDF 로 만드는 방법은 어떨까요?

왼쪽 패널에서 File → Export frames to PDF 를 클릭하시면 됩니다.

다만 PDF 작업하실때 주의점은 프레임으로 설정하고 하셔야 한다는 것 입니다!

# 3.피그마에서 PDF로 내보낼 때 꿀팁

피그마에서 PDF를 내보낼 때 알아두면 좋은 팁들을 정리해봤습니다.

1 파일 용량 관리

PDF 파일이 너무 크다면 내보낼 때 Export size를 줄여서 용량을 줄일 수 있습니다.

2 벡터 파일로 내보내기

PDF로 내보낸 디자인은 벡터 형식으로 저장되기 때문에 확대해도 이미지 품질이 손상되지 않습니다.

3 여러 페이지 한번에 내보내기

여러 페이지를 동시에 PDF로 저장하면 하나의 PDF 파일에 여러 페이지가 포함됩니다. 각 페이지가 자동으로 정리된 문서 형태로 생성되므로 보고서나 프레젠테이션 자료 제작에 매우 편리합니다.

# 4.피그마 PDF 내보내기 자주 하는 질문 (FAQ)

1 Q. PDF 로 내보냈는데, 품질이 낮게 나옵니다. 해결 방법은?

1 A. 내보내기 설정에서 Quality 를 확인하여 Medium 또는 High 로 설정하세요.

2 Q. 피그마에서 텍스트가 깨지지않고 PDF 로 잘 저장되나요?

2 A. 네, 피그마에서 PDF로 내보내는 경우 텍스트는 벡터로 저장되어 확대해도 품질이 유지됩니다.

✅ 도움될만한 포스팅

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

이번 포스팅에서는 피그마에서 자주쓰는 단축키를 종류별로 모아보도록 하겠습니다. 단축키를 잘 사용하면 작업시간이 단축되므로 자주쓰이는 단축키는 외워두시는 것을 추천드립니다.피그

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

필자는 피그마 무료버전을 사용중입니다. 팀원이 피그마 에서 작업 하는데, 동시작업은 유료버전이 필요합니다.내 로컬 Drafts 로 옮겨도 request access 가 뜨는데, 로컬로 옮긴 후 작업 할 수 있는

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기 피그마 작업중 테이블 UI 가 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 해당내용은 오토레이아웃을

it-ability.tistory.com

[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[ 피그마 ] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용) 피그마 작업중 이미지를 도형모양으로 넣는 프로필 UI 가 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기 피그마 작업중 이미지 의 누끼를 따는 작업이 필요하게 되었습니다. 빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. 해당 내용은 펜을 이용

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 아이콘(ICON) 만들기

[ 피그마 ] 초간단! 아이콘(ICON) 만들기

[ 피그마 ] 초간단! 아이콘(ICON) 만들기 디자인 시스템에서 빠질 수 없는 것이 바로 ‘아이콘’입니다. 오늘은 피그마(Figma)를 사용해 누구나 따라 할 수 있는 초간단 아이콘 제작 과정을 단계별로

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 피그마 프로토타입 만들기

[ 피그마 ] 초간단! 피그마 프로토타입 만들기

[ 피그마 ] 초간단! 피그마 프로토타입 만들기# 1.프로토타입의 개념과 필요성 프로토타입은 사용자가 실제 제품처럼 느끼도록 하는 인터랙티브 목업입니다. 피그마에서는 디자인과 프로토타입

it-ability.tistory.com

thumbnail

[ SQL ] SQL 조인 이미지,실무포함 총정리 ( INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN, CROSS JOIN,SELF JOIN)

Rio - Moon — Thu, 22 May 2025 12:05:47 +0900

SQL 조인

SQL 조인 실무포함 총정리

데이터베이스를 다루는 개발자나 데이터 분석가라면 반드시 접하게 되는 개념이 바로 SQL 조인(JOIN) 입니다. SQL 조인은 데이터베이스 내 서로 다른 테이블에 있는 데이터를 연결해 보여질 때 원하는 정보들만 추려서 보기위함으로 주로 쓰입니다.

흔히 데이터베이스는 여러 테이블로 나누어 데이터를 저장하며, 실무에서는 이러한 테이블들을 연결하여 복잡한 질문에 대한 답을 얻어야 할 때가 많습니다. 이때 사용하는 기술이 바로 SQL 조인이며, 이를 잘 다루는 것은 데이터베이스 관련 업무의 핵심 역량 중 하나라고 할 수 있습니다.

하지만 SQL 조인은 종류가 다양하고 용도와 결과가 조금씩 달라 조인이 필요할 때 마다 항상 검색을 하곤 했습니다.

이 글에서는 SQL 조인의 개념부터 종류별 특징, 실제 사용 예시 를 정리해 SQL 조인이 필요할 때 찾아볼 수 있도록 정리했습니다.

✅ 각종 팁 모음

[ 엑셀 ] 구글 스프레드시트 자주쓰는 함수 정리 (PDF 공유)

구글 스프레드시트는 강력한 데이터 분석 도구로, 다양한 함수를 통해 복잡한 작업도 간단하게 처리할 수 있습니다. 이번 포스팅에서는 구글 스프레드시트에서 자주 사용하는 함수들을 소개하

it-ability.tistory.com

[ AI 툴 ] 2025년 주목해야 할 AI 일정 관리 & 스케줄링 툴 TOP 10

it-ability.tistory.com

[ AI 툴 ] 2025년 주목해야 할 AI 코딩 툴 TOP 10

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )

it-ability.tistory.com

[개발 같이해요/AI] - [ AI ] Model Context Protocol (MCP) 쉽게 이해하기

[ AI ] Model Context Protocol (MCP) 쉽게 이해하기

it-ability.tistory.com

[개발 같이해요/DB] - [ mongodb ] 몽고db 설치 및 개발환경 세팅

[ mongodb ] 몽고db 설치 및 개발환경 세팅

MongoDB는 스키마가 유연하고 성능이 뛰어난 NoSQL 데이터베이스로 많은 개발자들에게 인기를 끌고 있습니다.이번 포스팅 에서는 MongoDB 설치 및 개발환경 세팅에 대해 알아보도록 하겠습니다. 다

it-ability.tistory.com

1. SQL 조인의 개념

데이터베이스 테이블과 관계의 이해

SQL 조인을 이해하기 전에 먼저 데이터베이스에서 테이블과 테이블 간의 관계를 이해할 필요가 있습니다.

테이블(Table)은 데이터베이스에서 데이터를 저장하는 기본 단위로, 행(row)과 열(column)의 형태로 데이터를 구성합니다.
데이터는 여러 테이블로 나누어 저장되며, 이들 간에는 보통 특정 키(key)를 통해 관계(relationship)가 맺어집니다.
관계형 데이터베이스(Relational Database)는 이러한 테이블 간의 관계를 활용해 데이터를 효율적으로 관리하고, 필요한 정보를 빠르게 조회할 수 있도록 돕습니다.

예를 들어, 온라인 쇼핑몰의 경우 고객 정보는 '고객 테이블'에, 주문 정보는 '주문 테이블'에 별도로 저장되는데, 두 테이블을 연결하여 어떤 고객이 어떤 주문을 했는지 쉽게 확인할 수 있습니다.

SQL 조인의 기본 정의와 목적

SQL에서 조인이란, 두 개 이상의 테이블을 서로 연결하여 하나의 결과 집합으로 만드는 작업입니다.

조인은 공통 키(common key) 값을 기준으로 이루어지며, 일반적으로 두 테이블의 연관된 데이터를 함께 표시하는 데 사용됩니다.

즉, SQL 조인을 사용하는 목적은

여러 테이블의 정보를 하나로 묶어 종합적으로 보여줌으로써 데이터의 의미를 보다 명확히 파악
중복 데이터를 줄이고 데이터의 일관성과 무결성을 유지
데이터 분석 및 보고서를 생성할 때 필수적인 정보들을 빠르게 조회 및 활용

이라고 볼 수 있습니다.

SQL 조인의 기본 문법

SELECT 컬럼명
FROM 테이블1
[INNER|LEFT|RIGHT|FULL OUTER|CROSS] JOIN 테이블2
ON 테이블1.공통키 = 테이블2.공통키;

이 중에서 INNER JOIN이 가장 자주 사용되는 기본 형태이며, 나머지 JOIN들은 필요에 따라 특정 상황에서 활용됩니다.

SQL 조인의 예시

고객 테이블 (customers)

customer_id	customer_name
1	홍길동
2	김철수

주문 테이블(orders)

order_id	customer_id	product
101	1	노트북
102	2	스마트폰
103	1	키보드

두 테이블 조인 쿼리 ( customer_id 를 기준 으로 )

SELECT customers.customer_name, orders.product
FROM customers
INNER JOIN orders ON customers.customer_id = orders.customer_id;

결과

customer_name	product
홍길동	노트북
홍길동	키보드
김철수	스마트폰

2. SQL 조인의 종류 및 특징

INNER JOIN

inner join

INNER JOIN은 두 테이블에서 조인 조건이 일치하는 행들만 반환하는 가장 기본적인 조인 방식입니다. 공통된 키 값이 존재하는 데이터만 결과로 나타나며, 실무에서 가장 흔히 사용됩니다.

문법

SELECT 컬럼명
FROM 테이블1
INNER JOIN 테이블2 ON 테이블1.공통키 = 테이블2.공통키;

예시

customers (고객 테이블)

customer_id	customer_name
1	홍길동
2	김철수
3	박영희

orders (주문 테이블)

order_id	customer_id	product
101	1	노트북
102	2	스마트폰
103	4	태블릿

SQL 쿼리

SELECT customers.customer_name, orders.product
FROM customers
INNER JOIN orders ON customers.customer_id = orders.customer_id;

결과

customer_name	product
홍길동	노트북
김철수	스마트폰

고객 ID가 양쪽 테이블 모두 존재하는 데이터만 결과로 나타납니다.

주의점 및 활용 팁

INNER JOIN은 공통 키가 없는 데이터는 결과에 나타나지 않습니다.
반드시 데이터가 양쪽 테이블에 모두 존재할 때만 활용해야 합니다.

LEFT JOIN

LEFT JOIN은 왼쪽 테이블의 모든 데이터를 포함하여 오른쪽 테이블에서 일치하는 데이터를 결합합니다. 오른쪽 테이블에 매칭되는 데이터가 없으면 NULL 값으로 채워집니다.

문법

SELECT 컬럼명
FROM 테이블1
LEFT JOIN 테이블2 ON 테이블1.공통키 = 테이블2.공통키;

예시

customers (고객 테이블)

customer_id	customer_name
1	홍길동
2	김철수
3	박영희

orders (주문 테이블)

order_id	customer_id	product
101	1	노트북
102	2	스마트폰
103	4	태블릿

SQL 쿼리

SELECT customers.customer_name, orders.product
FROM customers
LEFT JOIN orders ON customers.customer_id = orders.customer_id;

결과

customer_name	product
홍길동	노트북
김철수	스마트폰
박영희	NULL

왼쪽 테이블(customers)의 모든 고객이 표시되며, 박영희 고객은 주문이 없으므로 product 컬럼이 NULL로 표시됩니다.

주의점 및 활용 팁

메인 테이블의 모든 데이터를 기준으로 데이터를 조회할 때 유용합니다.
데이터 누락이나 미기록 항목을 확인할 때 유용합니다.

RIGHT JOIN

RIGHT JOIN은 오른쪽 테이블의 모든 데이터를 기준으로 왼쪽 테이블과 결합합니다. 왼쪽 테이블에 매칭 데이터가 없으면 NULL 값을 채워 넣습니다.

문법

SELECT 컬럼명
FROM 테이블1
RIGHT JOIN 테이블2 ON 테이블1.공통키 = 테이블2.공통키;

예시

customers (고객 테이블)

customer_id	customer_name
1	홍길동
2	김철수
3	박영희

orders (주문 테이블)

order_id	customer_id	product
101	1	노트북
102	2	스마트폰
103	4	태블릿

SQL 쿼리

SELECT customers.customer_name, orders.product
FROM customers
RIGHT JOIN orders ON customers.customer_id = orders.customer_id;

결과

customer_name	product
홍길동	노트북
김철수	스마트폰
NULL	태블릿

오른쪽 테이블(orders)의 모든 주문이 표시되며, customer_id가 없는 주문(태블릿 주문)은 customer_name이 NULL로 표시됩니다.

주의점 및 활용 팁

일반적으로 LEFT JOIN을 선호하며 RIGHT JOIN은 명확한 이유가 있을 때만 사용합니다.
데이터베이스 설계상 주 테이블이 오른쪽일 때 유용하게 사용됩니다.

FULL OUTER JOIN

FULL OUTER JOIN은 양쪽 테이블의 모든 데이터를 포함하여 일치하지 않는 데이터는 NULL로 표시합니다.

문법

SELECT 컬럼명
FROM 테이블1
FULL OUTER JOIN 테이블2 ON 테이블1.공통키 = 테이블2.공통키;

예시

customers (고객 테이블)

customer_id	customer_name
1	홍길동
2	김철수
3	박영희

orders (주문 테이블)

order_id	customer_id	product
101	1	노트북
102	2	스마트폰
103	4	태블릿

SQL 쿼리

SELECT customers.customer_name, orders.product
FROM customers
FULL OUTER JOIN orders ON customers.customer_id = orders.customer_id;

결과

customer_name	product
홍길동	노트북
김철수	스마트폰
박영희	NULL
NULL	태블릿

모든 고객과 주문이 표시되며, 대응되는 데이터가 없으면 NULL로 처리됩니다.

주의점 및 활용 팁

데이터 전체를 비교 분석하거나, 데이터 누락을 파악할 때 유용합니다.
데이터 양이 많아지면 성능이 떨어질 수 있으므로 주의합니다.

CROSS JOIN

CROSS JOIN은 두 테이블의 모든 데이터를 조합하여 카테시안 곱(Cartesian Product)을 생성합니다.

문법

SELECT 컬럼명
FROM 테이블1
CROSS JOIN 테이블2;

주의점 및 활용 팁

CROSS JOIN은 테이블의 크기가 클 경우 결과가 기하급수적으로 많아지므로 매우 조심해서 사용해야 합니다.
모든 조합 데이터를 만들어 분석하거나 특별한 목적이 있을 때만 사용합니다.

SELF JOIN

SELF JOIN은 같은 테이블을 자신과 조인하는 것입니다. 주로 계층형 데이터나 동일 테이블 내의 데이터 간 관계를 분석할 때 사용합니다.

예시

사원과 매니저가 같은 테이블에 있을 때 활용 가능합니다.

SELECT e.employee_name, m.employee_name AS manager_name
FROM employees e
INNER JOIN employees m ON e.manager_id = m.employee_id;

직원의 이름과 그 직원의 매니저 이름을 함께 출력합니다.

주의점 및 활용 팁

동일한 테이블에서 상위 하위 관계를 찾을 때 유용합니다.

3. 실전 프로젝트에서 SQL 조인 사용 예시

지금까지 배운 SQL 조인의 개념과 특징을 토대로, 실무에서 자주 접할 수 있는 SQL 조인의 실제 활용 예시를 알아보겠습니다.

고객과 주문 테이블을 활용한 사례

온라인 쇼핑몰에서 특정 고객이 어떤 상품을 주문했는지 조회하는 예시입니다.

테이블 구조 예시

customer 테이블

customer_id	customer_name	email
1	홍길동	hong@example.com
2	김철수	kim@example.com

orders 테이블

order_id	customer_id	product_name	order_date
1001	1	노트북	2024-12-10
1002	2	스마트폰	2024-12-11
1003	1	키보드	2024-12-12

SQL 쿼리 예시 (INNER JOIN 활용)

SELECT c.customer_name, o.product_name, o.order_date
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id
ORDER BY c.customer_name, o.order_date;

결과

customer_name	product_name	order_date
김철수	스마트폰	2024-12-11
홍길동	노트북	2024-12-10
홍길동	키보드	2024-12-12

이렇게 INNER JOIN을 통해 고객별 주문 목록을 쉽게 확인할 수 있습니다.

상품과 재고 테이블을 활용한 사례

상품 목록과 해당 상품의 재고 수량을 확인하는 경우입니다. 일부 상품은 재고가 없을 수도 있습니다.

테이블 구조 예시

products 테이블

product_id	product_name	category
1	노트북	전자기기
2	스마트폰	전자기기
3	이어폰	액세서리

inventory 테이블

inventory_id	product_id	quantity
10	1	5
11	2	0

SQL 쿼리 예시 (LEFT JOIN 활용)

SELECT p.product_name, p.category, IFNULL(i.quantity, 0) AS quantity
FROM products p
LEFT JOIN inventory i ON p.product_id = i.product_id;

결과

product_name	category	quantity
노트북	전자기기	5
스마트폰	전자기기	0
이어폰	액세서리	0

사원과 부서 테이블을 활용한 사례

사원 목록과 각 사원이 소속된 부서명을 함께 조회하는 예시입니다.

테이블 구조 예시

employees 테이블

employee_id	employee_name	department_id
101	이영수	1
102	정민아	2
103	박진우	NULL

departments 테이블

department_id	department_name
1	영업부
2	개발부

SQL 쿼리 예시 (LEFT JOIN 활용)

SELECT e.employee_name, IFNULL(d.department_name, '부서 없음') AS department_name
FROM employees e
LEFT JOIN departments d ON e.department_id = d.department_id;

결과

employee_name	department_name
이영수	영업부
정민아	개발부
박진우	부서 없음

4. SQL 조인 팁

인덱스(Index) 활용 하기

SQL 조인의 성능을 최적화하는 가장 중요한 요소 중 하나는 바로 인덱스(Index) 입니다. 인덱스는 데이터베이스가 데이터를 빠르게 찾을 수 있도록 돕는 자료구조로, 검색 성능을 획기적으로 향상시킵니다.

인덱스 적용이 필요한 컬럼

JOIN 조건에 자주 사용되는 컬럼 (FK, PK 등)
WHERE 절에서 필터링할 때 자주 쓰는 컬럼
ORDER BY 또는 GROUP BY 절에서 자주 쓰이는 컬럼

인덱스 생성 예시

CREATE INDEX idx_orders_customer_id ON orders(customer_id);

인덱스를 생성하면 데이터베이스가 조인을 수행할 때 더 빠르게 데이터를 찾고 처리할 수 있습니다.

필요한 데이터만 선택(Projection)하기

조인 시 모든 컬럼을 불러오는 것은 성능 저하를 일으킬 수 있습니다. 필요한 컬럼만 선택하는 습관을 기르면 데이터 처리 속도가 훨씬 빨라집니다.

성능에 좋지 않은 예시

SELECT *
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id;

성능 최적화 예시

SELECT c.customer_name, o.product_name, o.order_date
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id;

조건을 조인(ON)에 명시적으로 기술하기

조인 조건을 명시적으로 ON 절에 기술하면 데이터베이스가 더욱 효율적으로 데이터를 필터링할 수 있습니다.

비효율적인 예시

SELECT c.customer_name, o.product_name
FROM customers c, orders o
WHERE c.customer_id = o.customer_id AND o.order_date > '2025-01-01';

성능 최적화 예시

SELECT c.customer_name, o.product_name
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id AND o.order_date > '2025-01-01';

서브쿼리(Subquery)보다는 JOIN 사용하기

일반적으로 서브쿼리보다 조인이 성능이 더 뛰어납니다. 서브쿼리는 처리 방식에 따라 성능이 떨어질 수 있으므로, 가능하면 조인을 사용하는 것을 추천합니다.

서브쿼리를 사용한 예시 (비효율적)

SELECT customer_name
FROM customers
WHERE customer_id IN (SELECT customer_id FROM orders);

JOIN을 사용한 최적화 예시 (효율적)

SELECT DISTINCT c.customer_name
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id;

조인 순서(Join Order)를 고려하기

여러 테이블을 조인할 때는 테이블의 크기와 필터링 정도를 고려하여 조인 순서를 최적화하면 성능 향상에 도움을 줍니다.

작은 테이블이나 필터링 조건으로 크기를 줄인 테이블을 먼저 조인하기

비효율적인 예시

SELECT *
FROM orders o
INNER JOIN large_table lt ON o.id = lt.order_id
INNER JOIN small_table st ON o.id = st.order_id;

효율적인 예시

SELECT *
FROM orders o
INNER JOIN small_table st ON o.id = st.order_id
INNER JOIN large_table lt ON o.id = lt.order_id;

데이터베이스 쿼리 플랜(Query Plan) 점검하기

모든 데이터베이스 시스템은 실행 계획(Execution Plan)을 제공하며, 이를 통해 쿼리가 어떻게 실행되는지 분석할 수 있습니다.

EXPLAIN 명령어나 관련 툴을 활용하여 쿼리 실행 계획 확인 하고 체크하기
실행 계획에서 Full Table Scan이나 비효율적인 처리가 있다면 인덱스 추가 및 조인 조건을 개선 필요

예시

EXPLAIN SELECT customer_name FROM customers WHERE customer_id = 1;

이 결과를 통해 인덱스가 제대로 사용되고 있는지 확인할 수 있습니다.

5. SQL 조인 할 때 많이 하는 실수 와 해결방법

조인 조건 누락으로 인한 카테시안 곱 발생

조인 조건을 실수로 누락하면 예상보다 매우 큰 결과(카테시안 곱)가 생성될 수 있습니다.

문제 예시

SELECT *
FROM customers c, orders o;  -- 조건이 누락됨

조건이 없기 때문에 고객 수 × 주문 수 만큼의 매우 많은 결과가 반환됩니다.

해결 방법

항상 ON 조건을 명확하게 하기.

SELECT *
FROM customers c
INNER JOIN orders o ON c.customer_id = o.customer_id;

잘못된 조인 타입 선택으로 데이터 누락 발생

INNER JOIN과 LEFT JOIN을 잘못 선택하면 예상치 못한 데이터 누락이 발생할 수 있습니다.

문제 예시

SELECT customers.customer_name, orders.product_name
FROM customers
INNER JOIN orders ON customers.customer_id = orders.customer_id;

주문 내역이 없는 고객을 보여주지 못합니다.

해결 방법

모든 고객 데이터를 보려면 LEFT JOIN 사용하기

SELECT customers.customer_name, orders.product_name
FROM customers
LEFT JOIN orders ON customers.customer_id = orders.customer_id;

중복된 데이터가 포함된 결과 발생

조인된 테이블에 중복된 키 값이 존재하면 예상치 못한 중복 데이터가 결과에 나타날 수 있습니다.

문제 예시 (중복 데이터 발생)

테이블 예시

orders 테이블

order_id	customer_id	product_name
1	100	노트북
2	100	노트북

SELECT customers.customer_name, orders.product_name
FROM customers
INNER JOIN orders ON customers.customer_id = orders.customer_id;

중복된 주문이 각각 별도의 행으로 나타납니다.

해결 방법

중복 데이터 방지를 위해 DISTINCT를 활용하기

SELECT DISTINCT customers.customer_name, orders.product_name
FROM customers
INNER JOIN orders ON customers.customer_id = orders.customer_id;

OUTER JOIN 시 NULL 처리 실수

OUTER JOIN을 사용하면 데이터가 없는 행에 NULL이 반환됩니다. 이때 NULL 처리를 하지 않으면 이후 데이터 처리 과정에서 오류가 발생할 수 있습니다.

문제 예시 (NULL 처리 실수)

SELECT c.customer_name, o.product_name
FROM customers c
LEFT JOIN orders o ON c.customer_id = o.customer_id;

주문하지 않은 고객은 product_name이 NULL입니다.

해결 방법

명시적으로 NULL 처리 하기

SELECT c.customer_name, IFNULL(o.product_name, '주문 내역 없음') AS product_name
FROM customers c
LEFT JOIN orders o ON c.customer_id = o.customer_id;

6. 정리

INNER JOIN은 양쪽 테이블에서 일치하는 데이터만 반환하며, 가장 많이 사용됩니다.

LEFT JOIN, RIGHT JOIN은 특정 테이블을 기준으로 데이터를 모두 조회할 때 유용하며, 누락된 데이터는 NULL로 처리됩니다.

FULL OUTER JOIN은 양쪽 테이블의 모든 데이터를 확인하고자 할 때 적합합니다.

CROSS JOIN은 모든 데이터를 조합하는 카테시안 곱으로 결과가 많아지므로 조심스럽게 사용합니다.

SELF JOIN은 동일한 테이블 내의 데이터 관계를 확인할 때 효과적입니다.

또한 SQL 조인의 성능을 높이기 위해서는 반드시 인덱스를 활용하고, 필요한 데이터만 조회하며, 조인 조건을 명확히 설정하는

것들이 중요합니다.

sql thumbnail

[ 피그마 ] 초간단! 피그마 프로토타입 만들기

Rio - Moon — Tue, 22 Apr 2025 09:59:13 +0900

[ 피그마 ] 초간단! 피그마 프로토타입 만들기

# 1.프로토타입의 개념과 필요성

프로토타입은 사용자가 실제 제품처럼 느끼도록 하는 인터랙티브 목업입니다. 피그마에서는 디자인과 프로토타입을 한곳에서 관리할 수 있어, 반복 작업 없이 즉시 인터랙션을 연결하고 실시간으로 피드백을 받을 수 있습니다.

특히 협업 중 실시간 코멘트 기능과 브라우저 기반 공유 링크 덕분에 개발자·디자이너 간 의사소통 속도가 크게 향상됩니다.

이번 포스팅에서는 프로토타입을 만들어보도록 하겠습니다.

✅ 도움될만한 포스팅

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 아이콘(ICON) 만들기

[ 피그마 ] 초간단! 아이콘(ICON) 만들기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

it-ability.tistory.com

# 2.준비 단계 – 프레임과 리소스 정리

1) 프레임 설정

기본적으론, Frame 툴(F 단축키)로 기기별 해상도에 맞는 프레임을 생성합니다. iOS / Android 프리셋을 사용하면 스크롤 영역까지 자동으로 포함되어 편리합니다.

왼쪽 패널에 Assets 탭을 누르신 후, iOS 18 and iPadOS 18 을 클릭합니다.

Examples 를 누릅니다.

홈스크린

홈스크린과 퀵액션을 추가할겁니다.

추가

여기서 Insert instance 를 누릅니다.

추가완료

추가적으로, 퀵액션에 있는 Home 아이콘을 홈 스크린 화면에 복사합니다.

# 3.인터랙션 연결하기 – Prototype 탭

우측패널에 프로토타입 탭

1) 노드 드래그로 화면 전환 설정

프레임 또는 오브젝트를 선택한 뒤 오른쪽 Prototype 탭에서 파란색 노드를 다음 프레임으로 드래그합니다. Navigate To · Open Overlay · Swap With 등 전환 유형을 지정할 수 있습니다.

2) 트리거와 애니메이션 세부 조정

클릭, 드래그, 스와이프, 키 입력 등 Trigger를 지정하고, Smart Animate를 활용해 자연스러운 레이어 간 모핑 효과를 넣어보세요. Easing과 Duration을 조절하면 완성도가 한층 높아집니다.

3) 인터랙션 확인 – Play 모드

상단 ▶︎ 아이콘을 클릭하면 새 탭에서 프로토타입이 실행됩니다. 실제 기기 사이즈별 Fit 옵션을 조정해 가로·세로 방향 모두 테스트해 보세요.

우측 패널

# 4.공유 & 피드백 사이클

1) 공유 링크 만들기

우측 상단 Share 버튼 → Prototype 탭에서 Anyone with the link 또는 View only 권한을 설정해 URL을 복사합니다. 무설치·브라우저 기반 미리보기가 핵심입니다.

완성

2) 코멘트 기능 활용

리뷰어에게 링크를 전달하면 실시간으로 C 키를 눌러 원하는 위치에 댓글을 남길 수 있습니다. 개발자는 Inspect 탭에서 CSS 속성을 확인하며 즉시 개발에 반영할 수 있어 협업 효율이 극대화됩니다.

3) 버전 관리 팁

피그마는 자동으로 버전 히스토리를 기록합니다. 중요한 피드백 반영 후 Save as version을 눌러 명시적으로 저장해두면, 팀원 모두 변경 이력을 한눈에 파악할 수 있어 롤백이 쉽습니다.

썸네일

[ 피그마 ] 초간단! 아이콘(ICON) 만들기

Rio - Moon — Fri, 18 Apr 2025 11:47:31 +0900

[ 피그마 ] 초간단! 아이콘(ICON) 만들기

디자인 시스템에서 빠질 수 없는 것이 바로 ‘아이콘’입니다. 오늘은 피그마(Figma)를 사용해 누구나 따라 할 수 있는 초간단 아이콘 제작 과정을 단계별로 알아보도록 하겠습니다. 실무에 바로 적용할 수 있도록 기초 설정부터 내보내기까지 꼼꼼히 다뤄보겠습니다.

# 1.작업 파일 세팅

1) 프레임(Frame) 설정

F 키를 눌러 24×24 px 또는 32×32 px 프레임을 만듭니다. 아이콘 세트는 보통 동일한 캔버스 크기를 유지해야 일관성을 지킬 수 있습니다. 그리드(Grid)를 4 px 간격으로 설정하면 정렬이 더욱 수월해집니다.

프레임 생성

이번 포스팅에선 관리자 화면에서 쓰일 아이콘을 만들어 보겠습니다.

# 2.아이콘 기본 도형 그리기

1) 도형 툴 활용

O (Ellipse), R (Rectangle) 키로 원·사각형 등을 그리고, Shift를 눌러 완벽한 비율을 유지합니다. 예: ‘플러스(+)’ 아이콘이라면 선(Line) 두 개를 교차시켜 만듭니다.

플러스 아이콘

사각형 아이콘

2) Stroke & Fill 값 지정

아이콘 선 두께는 1.5 px 또는 2 px를 많이 사용합니다. Stroke Align을 ‘Center’로 두면 선이 반듯하게 표현됩니다. 필요 시 Corner radius로 부드럽게 라운딩 처리하세요.

플러스 아이콘 적용

사각형 아이콘 적용

# 3.Boolean 연산으로 형태 다듬기

1) Union / Subtract

여러 도형을 선택 후 Union으로 합치거나, 필요 없는 부분은 Subtract를 사용해 깔끔히 잘라냅니다. 단축키 Ctrl/Cmd + E로 Flatten하면 최종 Path 한 개로 정리됩니다.

Ctrl + E 적용

2) Smart Alignment

Shift + A를 눌러 Auto Layout을 적용하면 요소 간 간격을 쉽게 조정할 수 있습니다. 균형 잡힌 아이콘이 완성됩니다.

오토레이아웃 적용

# 4.컬러 & 상태별 변형

1) 단색 vs 투톤

UI 아이콘은 일반적으로 단색을 권장하지만, 강조가 필요할 땐 투톤(Primary + Accent)을 활용할 수 있습니다. 색상 대비는 WCAG 기준 3:1 이상을 확인하세요.

사각형 아이콘

외곽선: Primary 컬러 (#3366FF)

배경: Accent 컬러 (#6699FF) 10% 투명도

플러스 아이콘

수직선: Primary 컬러 (#3366FF)

수평선: Accent 컬러 (#6699FF)

을 기준으로 만들어보았습니다.

색상 적용

투톤 적용

2) Hover / Disabled 상태

Variants 기능으로 Hover, Active, Disabled 상태를 한 곳에 묶습니다. 컴포넌트 이름에 property=state 식으로 설정하면 개발자와 협업할 때 매우 편리합니다.

사각형 상태

플러스 상태

# 5.아이콘 내보내기 & 최종 점검

1) Export 설정

아이콘을 선택하고 Export → SVG / PNG를 지정합니다. SVG는 벡터라 해상도 손실이 없고, PNG는 @2x, @3x 등 배수 출력이 필요할 때 유용합니다.

이번 포스팅에서 초간단 아이콘 만들기를 해봤습니다. 원하는 아이콘을 손쉽고 빠르게 만들어보시고 디자인 시스템의 완성도를

높여보세요.

응용

무료 아이콘 플러그인도 많으니 적용하셔서 쉽게 사용할수도 있습니다.

✅ 도움될만한 포스팅

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

it-ability.tistory.com

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

it-ability.tistory.com

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

it-ability.tistory.com

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

it-ability.tistory.com

썸네일

[ AI ] Model Context Protocol (MCP) 쉽게 이해하기

Rio - Moon — Wed, 2 Apr 2025 14:15:32 +0900

Model Context Protocol (MCP) 쉽게 이해하기

MCP(Model Context Protocol)는 LLM 애플리케이션과 외부 데이터 소스 및 도구 간의 원활한 통합을 가능하게 하는 개방형 프로토콜입니다. 이번 포스팅에서는 요즘 가장 핫한 주제인 MCP의 주요 개념, 아키텍처, 구성 요소 및 구현 방법에 대해 다루도록 하겠습니다.

✅ 각종 팁 모음

[ 엑셀 ] 구글 스프레드시트 자주쓰는 함수 정리 (PDF 공유)

it-ability.tistory.com

[ AI 툴 ] 2025년 주목해야 할 AI 일정 관리 & 스케줄링 툴 TOP 10

it-ability.tistory.com

[ AI 툴 ] 2025년 주목해야 할 AI 코딩 툴 TOP 10

it-ability.tistory.com

[ AI 툴 ] 2025년 주목할만한 AI 이미지 생성 도구 TOP 20 ( 특징,장점,단점 분석,후기 )

it-ability.tistory.com

[ IT 프로젝트 관리 ] 프로젝트 관리 프로세스 완벽 정리! 단계별 산출물과 필수 문서

프로젝트 관리 프로세스 완벽 정리! 단계별 산출물과 필수 문서회사에서 프로젝트를 진행하다 보면 명확한 프로세스 없이 즉흥적으로 업무를 처리하거나, 각 단계에서 어떤 문서를 작성하고 관

it-ability.tistory.com

1. MCP(Model Context Protocol)란 무엇인가?

프로토콜 (Protocol) 의 정의

프로토콜(Protocol)이란 두 개 이상의 시스템이 서로 통신할 때 따라야 하는 규칙이나 약속을 의미합니다. 프로토콜은 컴퓨터 네트워크, 인터넷 통신, 소프트웨어 간 데이터 교환 방식을 규정하고 원활한 소통을 돕습니다.

대표적인 프로토콜의 예시 를 통해 알아보겠습니다.

HTTP (Hypertext Transfer Protocol): 웹사이트와 브라우저 간의 데이터를 주고받을 때 사용하는 프로토콜.
TCP/IP (Transmission Control Protocol/Internet Protocol): 인터넷상에서 데이터가 어떻게 분할되고, 목적지까지 전달될지 정하는 규칙.
JSON-RPC (Remote Procedure Call): JSON 형식으로 데이터를 주고받으며 원격 시스템 간의 프로시저 호출을 지원하는 프로토콜.

이제 본격적으로 MCP와 그 특징에 대해 알아보겠습니다.

MCP (Model Context Protocol) 의 정의

MCP(Model Context Protocol)는 네트워크 환경에서 데이터의 흐름과 처리를 명확하게 관리하기 위해 개발된 프로토콜입니다. 특히, 애플리케이션과 모델 간 데이터 교환 과정에서 문맥(context)을 일관되게 유지하는 것이 MCP의 주된 목적입니다.

간단히 말해, MCP는 모델이 작업을 수행할 때 필요한 배경지식과 데이터를 제공하는 표준화된 규칙입니다.

공식문서에 따르면, 아래와 같이 표현하고 있습니다

AI 애플리케이션을 위한 USB-C 포트와 같은 MCP. USB-C가 다양한 주변기기 및 액세서리에 디바이스를 연결하는 표준화된 방법을 제공하는 것처럼, MCP는 다양한 데이터 소스 및 도구에 AI 모델을 연결하는 표준화된 방법을 제공합니다.

필요성

왜 MCP가 필요할까요?

현재 AI는 대부분 특정 데이터나 기능에 갇혀 있습니다. 예를 들어, AI가 웹 검색은 잘하지만, 회사 내부 문서나 특정 프로그램은 제대로 활용하지 못하는 경우가 많습니다. MCP는 이러한 '정보의 섬' 문제를 해결하고, AI가 더욱 폭넓게 활용될 수 있도록 돕는 역할을 합니다. 특히, 대규모 언어 모델(LLM)이 다양한 애플리케이션과 상호 작용하면서 발생하는 복잡성을 관리하고, LLM의 잠재력을 최대한 발휘할 수 있도록 지원합니다.

등장 배경

기존 AI 모델은 제한된 컨텍스트 정보만 가지고 작업을 수행 했습니다. 하지만 최근 생성형 AI 및 챗봇 서비스가 발전하면서, 더욱 복잡한 상황에서 정확한 응답을 제공하기 위한 컨텍스트 관리의 필요성이 급격히 증가했습니다. 이러한 배경에서 MCP가 등장한 것입니다.

2. MCP(Model Context Protocol) 구조 및 작동방식

MCP의 핵심은 호스트 애플리케이션이 여러 서버에 연결할 수 있는 클라이언트-서버 아키텍처를 따르는 것입니다

다이어그램 설명

MCP 호스트: MCP를 통해 데이터에 액세스하려는 클로드 데스크톱, IDE 또는 AI 도구와 같은 프로그램
MCP 클라이언트: 서버와 1:1 연결을 유지하는 프로토콜 클라이언트
MCP 서버: 표준화된 모델 컨텍스트 프로토콜을 통해 각각 특정 기능을 노출하는 경량 프로그램
로컬 데이터 소스: MCP 서버가 안전하게 액세스할 수 있는 사용자 컴퓨터의 파일, 데이터베이스 및 서비스
원격 서비스: MCP 서버가 연결할 수 있는 인터넷을 통해 사용 가능한 외부 시스템(예: API를 통해)

MCP는 주로 세 가지 구성 요소로 이루어집니다.

MCP 호스트: Claude Desktop, IDE 등 MCP를 통해 데이터에 접근하는 프로그램 . 호스트는 MCP 클라이언트를 통해 서버와 연결하고 AI 모델에 컨텍스트를 제공
MCP 클라이언트: 서버와 1:1 연결을 유지하는 프로토콜 클라이언트. 호스트와 서버 사이의 중개자 역할을 하며, 통신을 처리
MCP 서버: 표준화된 프로토콜을 통해 특정 기능을 제공하는 경량 프로그램. 리소스, 프롬프트, 도구 등의 기능을 클라이언트에 제공 이 세 구성 요소의 상호작용을 통해 AI 모델은 외부 데이터 소스와 도구에 안전하게 접근하고 활용할 수 있게 됩니다

MCP의 동작 원리

MCP는 클라이언트-서버 아키텍처를 기반으로 하며, JSON-RPC 2.0을 와이어 포맷으로 사용합니다. 기본 통신 구조는 요청(Requests), 응답(Responses), 알림(Notifications) 세 가지 유형의 메시지를 지원합니다

MCP는 일반적으로 다음과 같은 흐름을 따릅니다.

요청 수신: 외부 클라이언트로부터 요청을 받습니다.
Context 생성: 요청된 데이터를 처리하기 위한 컨텍스트가 생성됩니다.
모델 처리: 모델은 컨텍스트를 참조하며 요청된 데이터를 처리합니다.
응답 반환: 처리 결과가 컨텍스트에 저장된 후 클라이언트에 반환됩니다.

// 기본 JSON-RPC 2.0 메시지 형식
interface JSONRPCMessage {
  jsonrpc: "2.0";
  id?: string | number; // 요청/응답 식별자
  method?: string; // 메서드 이름
  params?: object; // 매개변수
  result?: object; // 응답 결과
  error?: {
    code: number;
    message: string;
    data?: unknown;
  };
}

통신 흐름은 크게 초기화(Initialization), 일반 통신, 종료 단계로 이루어집니다

3. MCP(Model Context Protocol) 주요기능

리소스 ( Resources )

리소스는 서버에서 LLM 에 데이터와 콘텐츠를 제공하는 구성요소 입니다.

주요특징

고유한 URI(예: 'greeting://{name}')로 식별됩니다
텍스트나 바이너리(blob) 형태로 제공 가능합니다
읽기 전용 데이터입니다

interface Resource {
  // 리소스의 고유 식별자 (URI 형식)
  uri: string;
  // 사용자에게 표시될 이름
  name: string;
  // 리소스에 대한 설명
  description?: string;
  // 리소스의 MIME 타입
  mimeType?: string;
}

리소스는 파일 내용, 데이터베이스 레코드, 문서 등 다양한 종류의 구조화된 정보를 모델에 제공하여 모델의 지식 기반을 확장하는 역할을 합니다

프롬프트(Prompts)

프롬프트는 AI 모델이 리소스와 도구를 활용하여 일관되고 유용한 응답을 생성하도록 안내하는 재사용 가능한 템플릿입니다.

주요 특징

서버에 인코딩된 '모범 사례'와 같은 역할을 합니다
단순한 문자열부터 복잡한 구조까지 다양한 형태로 구현 가능합니다

FastMCP에서는 @mcp.prompt() 데코레이터를 사용하여 프롬프트를 정의할 수 있으며, 포맷된 문자열을 반환하는 함수로 구현 가능합니다.

server.setRequestHandler(ListPromptsRequestSchema, async () => {
  return {
    prompts: [{
      name: "summarize_content",
      description: "주어진 내용을 요약합니다",
      arguments: [{
        name: "style",
        description: "요약 스타일 (brief/detailed)",
        required: false
      }]
    }]
  };
});

더 복잡한 구현에서는 다양한 역할(UserMessage, AssistantMessage)의 메시지 리스트를 반환할 수 있으며, 이미지나 Context 객체도 처리 가능합니다

도구(Tools)

도구는 AI 모델이 외부 시스템과 상호작용하고 실제 작업을 수행할 수 있게 하는 기능입니다.

설계 원칙

모델 중심 제어
신뢰성과 안전성을 위한 사용자 승인 기반 실행

구현 방법

MCP 서버에서 `'capabilities': {'tools': {'listChanged': true}}` 형태로 선언합니다
각 도구는 이름, 설명, 입력 스키마로 정의합니다
Python에서는 `@mcp.tool()` 데코레이터를 사용합니다

예시 도구

간단한 계산 기능(덧셈, BMI 계산 등)
정보 검색(국가별 수도 정보 등)
웹 브라우징(navigate, screenshot, click, fill 등)
코드 실행, API 호출, 데이터베이스 쿼리, 파일 조작 등

샘플링(Sampling)

샘플링은 서버가 클라이언트를 통해 LLM에게 텍스트 생성을 요청할 수 있게 해주는 기능입니다.

프로세스

서버가 클라이언트에 sampling/createMessage 요청 전송
클라이언트가 이를 검토 및 수정 후 LLM에 샘플링 요청
생성된 결과를 검토하여 서버에 반환

요청 형식

메시지 배열(역할과 콘텐츠 포함)
모델 선호도(비용, 속도, 기능에 대한 우선순위)
시스템 프롬프트
컨텍스트 포함 매개변수
온도, 최대 토큰 수, 중단 시퀀스와 같은 샘플링 매개변수

전송(Transports)

전송은 클라이언트와 서버 간 통신의 기반을 제공하는 구성 요소입니다.

통신 방식

JSON-RPC 2.0을 와이어 포맷으로 사용

표준 구현

표준 입출력(stdio): 로컬 통합과 명령줄 도구용
서버 전송 이벤트(SSE): HTTP POST 요청을 통한 서버-클라이언트 스트리밍

const server = new Server({
  name: "example-server",
  version: "1.0.0"
}, {
  capabilities: {}
});
const transport = new StdioServerTransport();
await server.connect(transport);

Transport 인터페이스를 구현하여 사용자 정의 전송 생성도 가능하며, 다양한 오류 처리 메커니즘(연결 오류, 메시지 파싱 오류, 프로토콜 오류, 네트워크 타임아웃)을 포함하고 있습니다.

4. MCP(Model Context Protocol) 활용 예시

AI 일정 관리

여러 일정 서비스(Google Calendar, Outlook 등)를 각각 연동하지 않아도, MCP 서버가 통합 캘린더 인터페이스를 제공하여 AI 비서가 “내일 일정 알려줘” 같은 요청에 외부 캘린더 데이터를 바로 찾아 일정 관리에 활용합니다.

지능형 코드 편집기

IDE에서 파일 관리, 버전관리(Git), 코드 자동완성 등을 각각 API 연동 없이, 하나의 MCP 프로토콜로 묶어 AI 코딩 비서가 모든 개발 도구 기능을 활용합니다. 예를 들어 AI가 GitHub에서 최신 코드를 불러오거나 파일을 수정하는 작업을 MCP를 통해 수행하게 할 수 있습니다.

데이터 분석

여러 종류의 데이터베이스나 데이터 소스를 AI가 실시간으로 결합 분석합니다. 개별 DB API를 몰라도 MCP 서버가 각 DB에 대한 쿼리 기능을 제공하여, AI가 필요한 정보를 수집/분석하고 결과를 시각화까지 할 수 있습니다.

요약하면, MCP(Model Context Protocol) 는 AI 모델의 능력을 외부 세계로 확장하기 위한 표준 통로이며,

이번 포스팅에서 설명드린 핵심 개념은 AI 에이전트가 필요에 따라 적절한 툴을 선택해 문제를 푼다는 것입니다.

이를 구현하려면, 제공할 기능을 정의하고 해당 기능을 수행하는 MCP 서버를 코딩한 뒤, Cursor와 같은 호스트 환경에 연결 설정을 하면 됩니다.

MCP를 도입함으로써 우리는 AI 개발 생산성을 크게 향상시킬 수 있으며 AI를 보다 능동적이고 똑똑하게 활용할 수 있는 기반을 마련하게 될 것 입니다.

다음 포스팅에선 실제 MCP 를 구현해 어떻게 쓰면 좋은지 알아보도록 하겠습니다.