비개발자를 위한 개발 상식

🧩 프로그램 만들 때 알아두면 좋은 기본개념

직접 코드를 쓰지 않더라도 AI나 개발자와 프로그램을 만들 때 용어를 알면 원하는 기능을 훨씬 정확하게 설명할 수 있습니다.

🧱
UI 용어

화면을 설명할 때 자주 쓰는 이름

카드를 누르면 실제 모양을 본뜬 작은 예시와 함께 자세한 설명이 펼쳐집니다.

정렬 기준
콤보박스

누르면 목록이 펼쳐지고 그중 하나를 고르는 입력 요소입니다.

자세히 보기

나라·정렬 기준·카테고리처럼 선택지가 많지만 화면 공간은 아끼고 싶을 때 씁니다.

쉽게 구분하기여러 개를 선택하면 체크박스, 하나만 선택하면 라디오 버튼, 목록을 펼쳐 하나를 고르면 콤보박스입니다.
이메일휴대폰
체크박스

여러 항목을 동시에 선택하거나 기능을 켜고 끌 때 사용합니다.

자세히 보기

복수 선택에 적합합니다. 예: 표시할 항목 여러 개 선택.

쉽게 구분하기여러 개를 선택하면 체크박스, 하나만 선택하면 라디오 버튼, 목록을 펼쳐 하나를 고르면 콤보박스입니다.
개인회사
라디오 버튼

여러 선택지 중 하나만 고르게 할 때 사용합니다.

자세히 보기

서로 동시에 선택되면 안 되는 옵션에 적합합니다.

쉽게 구분하기여러 개를 선택하면 체크박스, 하나만 선택하면 라디오 버튼, 목록을 펼쳐 하나를 고르면 콤보박스입니다.
기본상세기록

한 화면 안에서 내용을 여러 묶음으로 나눠 전환하는 메뉴입니다.

자세히 보기

설정·상세·기록처럼 같은 대상의 여러 화면을 나눌 때 씁니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
이름회사상태김OODREALT정상
테이블 / 그리드

이름·날짜·상태 같은 여러 데이터를 행과 열로 보여주는 표 형식입니다.

자세히 보기

목록을 비교하거나 정렬·필터해야 할 때 유용합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
저장할까요?취소 확인
모달 / 팝업

현재 화면 위에 잠시 띄워 확인·입력·선택을 받는 창입니다.

자세히 보기

중요한 확인이나 간단한 입력에 적합하지만 너무 자주 쓰면 흐름을 끊을 수 있습니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
?도움말을 보여줍니다
툴팁

버튼이나 항목에 마우스를 올렸을 때 짧은 설명을 보여주는 요소입니다.

자세히 보기

아이콘 의미처럼 짧은 보조 설명에 적합합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
내용
사이드바

화면 왼쪽이나 오른쪽에 고정하거나 펼쳐 쓰는 보조 메뉴 영역입니다.

자세히 보기

카테고리나 주요 메뉴가 많을 때 유용합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
파일(F)편집(E)보기(V)도움말(H)
메뉴 바

프로그램 상단에 파일·편집·보기·도움말 같은 주요 메뉴를 모아놓은 영역입니다.

자세히 보기

데스크톱 프로그램에서 기능을 큰 분류로 나눌 때 자주 사용합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
파일(F)
새로 만들기
열기
저장
드롭다운 메뉴

메뉴나 버튼을 눌렀을 때 아래쪽으로 펼쳐지는 세부 항목 목록입니다.

자세히 보기

메뉴 바의 파일(F) 같은 항목을 눌렀을 때 나오는 목록이 대표적입니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
💾🔍
툴바

자주 쓰는 기능을 아이콘이나 버튼으로 모아둔 도구 영역입니다.

자세히 보기

저장·실행·실행취소처럼 반복해서 누르는 기능에 적합합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
삽입보기
붙여넣기글꼴정렬
리본 메뉴

관련 기능을 탭과 그룹으로 넓게 묶어 보여주는 메뉴 방식입니다.

자세히 보기

Microsoft Office처럼 기능 수가 많은 프로그램에서 많이 보입니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
문서1 - 프로그램— □ ×
제목 표시줄

창 맨 위에서 프로그램·문서 이름과 최소화·최대화·닫기 버튼이 보이는 영역입니다.

자세히 보기

창 자체를 구분하고 이동할 때 기준이 되는 영역입니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
준비3개 선택100%
상태 표시줄

창 아래쪽에서 현재 상태·페이지·선택 개수 같은 보조 정보를 보여주는 영역입니다.

자세히 보기

사용자가 지금 어떤 상태인지 조용히 알려줄 때 적합합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
열기
이름 바꾸기
삭제
컨텍스트 메뉴

특정 항목을 우클릭했을 때 그 대상에 맞춰 나오는 메뉴입니다.

자세히 보기

선택한 파일·목록·카드에만 필요한 작업을 보여주기 좋습니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.

도구
문의
햄버거 메뉴

☰ 모양 버튼을 눌러 숨겨진 메뉴를 펼치는 방식입니다.

자세히 보기

모바일처럼 화면이 좁을 때 메뉴를 정리하기 좋습니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
스크롤바

내용이 화면보다 길 때 위·아래 또는 좌·우로 이동하는 막대입니다.

자세히 보기

긴 목록이나 큰 표를 탐색할 때 사용합니다.

쉽게 구분하기화면에서 비슷해 보여도 역할과 사용하는 상황이 다릅니다. 이름을 알면 개발 요청을 훨씬 정확하게 전달할 수 있습니다.
🔎
데이터 보기

검색 · 필터 · 정렬은 서로 다릅니다

🔍

검색

입력한 단어가 포함된 결과를 찾습니다. 예: 이름에 ‘김’이 들어간 명함 찾기.

전체고객만협력사

필터

조건에 맞는 항목만 남깁니다. 예: 그룹이 고객인 항목만 보기.

123

정렬

목록 자체는 유지하고 보이는 순서를 바꿉니다. 오름차순은 작은 값→큰 값, 내림차순은 그 반대입니다.

회사=A그룹=고객

다중 조건

여러 필터를 동시에 적용할 때 AND/OR 조건에 따라 결과가 달라집니다.

🌗
디자인

라이트모드 · 다크모드는 배경색만 바꾸는 일이 아닙니다

Light
Dark

글자 대비

배경과 글자 색이 충분히 구분되어야 읽기 쉽습니다.

버튼 상태

기본, 마우스 올림(Hover), 클릭, 비활성, 포커스 상태를 각각 확인해야 합니다.

입력창 · 표 · 스크롤바

본문만 바꾸고 기본 컨트롤이 밝게 남으면 전체 화면이 어색해집니다.

아이콘 · 이미지

한 테마에서만 잘 보이는 아이콘이 없는지도 확인합니다.

🧾
문제 찾기

로그는 프로그램이 남기는 작업 기록입니다

[INFO] 12:04:11 명함 125건 불러오기 완료[WARNING] 12:04:14 이메일 형식 확인 권장[ERROR] 12:04:16 저장 실패: database is locked

INFO

정상적으로 어떤 작업을 했는지 남기는 일반 기록입니다.

WARNING

당장은 실행되지만 확인할 필요가 있는 상황을 알려줍니다.

ERROR

작업 실패나 예외가 발생한 위치와 원인을 찾는 데 사용하는 핵심 기록입니다.

오류를 전달할 때

발생 시간, 누른 버튼, 입력값, ERROR 앞뒤 몇 줄, 재현 순서를 같이 주면 수정이 빨라집니다.

📐
화면 크기

해상도 · DPI · 배율 · 반응형

🖥️PC
태블릿
모바일

해상도

화면을 구성하는 픽셀 수입니다. 같은 1920×1080이라도 실제 화면 크기에 따라 체감 크기는 다릅니다.

DPI / 배율

Windows 100%·125%·150% 배율에서 글자와 컨트롤 크기가 달라질 수 있습니다.

반응형

웹에서 화면 폭에 따라 메뉴와 카드 배치를 바꾸는 방식입니다. PC 화면을 단순 축소하는 것과 다릅니다.

터치 영역

모바일 버튼은 손가락으로 누르기 충분한 크기와 간격을 가져야 합니다.

🚚
개발 흐름

개발 · 빌드 · 배포 · 버전

소스 수정빌드검증배포버전 기록

개발

기능과 화면을 만들고 수정하는 전체 작업입니다.

빌드

작성한 소스를 실제 실행 가능한 형태로 변환하는 과정입니다.

Debug / Release

Debug는 개발·문제 확인용, Release는 일반적으로 실제 배포용 설정을 뜻합니다.

배포

완성된 프로그램이나 웹사이트를 사용자가 실제 이용할 수 있는 위치에 올리는 과정입니다.

버전 관리

어떤 변경이 어느 버전에 들어갔는지 기록해 문제가 생기면 정상 버전으로 돌아갈 수 있게 합니다.

로그와 백업

오류 수정은 로그, 안전한 업데이트는 백업과 직전 정상본이 중요합니다.

💻
프로그래밍 언어

정의보다 ‘그래서 어디에 쓰는지’를 먼저 봅니다

C#

주로: Windows 데스크톱 프로그램·업무 도구·.NET 서비스. WinForms·WPF로 GUI 프로그램을 만들기 좋습니다.

C++

주로: 게임 엔진·시스템 프로그램·고성능 소프트웨어. 성능과 하드웨어 제어가 중요할 때 많이 씁니다.

Python

주로: 자동화·AI·데이터 처리·간단한 서버. 문법이 비교적 읽기 쉬워 입문에도 많이 쓰입니다.

JavaScript

주로: 웹페이지의 버튼·필터·화면 변화 같은 동작. Node.js를 사용하면 서버 개발에도 활용됩니다.

HTML

역할: 웹페이지의 제목·문단·버튼 같은 구조를 정의하는 마크업 언어입니다.

CSS

역할: 웹페이지의 색상·글자 크기·간격·반응형 배치 같은 디자인을 담당합니다.