APP DEVELOPMENT TERM
프론트엔드
사용자가 직접 만나는 화면 개발
프론트엔드는 사용자가 앱과 웹에서 직접 보고 누르는 화면을 만들고, 입력과 서버의 처리 결과를 이해할 수 있게 보여주는 개발 영역입니다.
30초 이해
프론트엔드는 디자인을 실제로 움직이고 서버 결과를 보여주는 화면 개발입니다
디자인 시안의 버튼, 목록과 입력창을 실제 기기에서 누르고 사용할 수 있게 만드는 영역이 프론트엔드입니다. 사용자의 행동을 받아 필요한 내용을 서버에 요청하고, 돌아온 성공·실패·대기 결과를 화면에 표시합니다.
웹 브라우저에서 실행되는 화면, iOS·Android 앱과 여러 기기에 맞는 화면을 모두 다룰 수 있습니다. 보기 좋은 구현뿐 아니라 속도, 접근성, 다양한 화면 크기와 네트워크 오류에서도 사용할 수 있게 만드는 것이 중요합니다.
한 장으로 이해
프론트엔드가 사용자와 서버를 연결하는 과정
디자인과 사용자 행동을 실제 화면으로 구현하고 서버 요청과 결과를 사용자가 이해할 수 있는 상태로 바꿉니다.
- 01
화면 구현
디자인을 기기에서 보이고 조작되는 화면으로 만듭니다.
- 02
입력 확인
사용자의 선택과 입력을 받고 기본적인 오류를 안내합니다.
- 03
서버 요청
로그인·예약·주문에 필요한 정보를 API로 보냅니다.
- 04
결과 표시
대기·완료·실패와 다음 행동을 화면에 보여줍니다.
프론트엔드는 보이는 화면만 그리는 역할이 아니라 사용자의 행동과 서버 결과를 정확하게 이어줍니다.
언제 사용하는 개념인가요?
앱과 웹 화면을 만들 때
디자인과 기능 정의를 실제 휴대폰·태블릿·브라우저에서 동작하도록 구현합니다.
서버와 데이터를 연결할 때
API를 호출하고 받은 정보를 목록, 상태와 알림으로 사용자가 이해하게 보여줍니다.
사용성을 개선할 때
화면 속도, 입력 편의, 오류 회복과 다양한 기기에서의 정렬을 개선합니다.
왜 중요한가요?
사용자가 서비스를 실제로 이용하게 합니다
기획과 디자인을 클릭·입력·이동 가능한 제품 경험으로 바꿉니다.
서버 상태를 이해할 수 있게 보여줍니다
처리 중, 성공, 실패와 다시 시도처럼 보이지 않는 처리 결과를 화면 언어로 전달합니다.
여러 환경에서 일관된 경험을 만듭니다
화면 크기, 운영체제와 브라우저가 달라도 핵심 기능을 읽고 조작할 수 있게 합니다.
실제 상황 예시
클래스 예약 앱의 프론트엔드라면
수강생이 수업을 찾고 예약하는 화면과 서버 결과를 실제 앱에서 연결합니다.
프론트엔드가 만드는 화면
- 수업 목록·필터·상세
- 날짜·인원 선택
- 예약·결제 입력
- 내 예약 상태와 알림
서버와 연결해 보여줄 상태
- 정보를 불러오는 중
- 예약 가능한 자리가 없음
- 결제 결과 확인 중
- 완료·실패와 다시 시도
버튼을 누른 직후 완료로 바꾸는 것이 아니라 서버가 확정한 결과를 받아 현재 상태와 다음 행동을 정확히 보여줘야 합니다.
자주 하는 오해
“프론트엔드는 디자인을 코드로 옮기기만 한다”
화면 구현과 함께 사용자 입력, 상태 관리, 서버 연결, 오류 처리, 속도와 접근성까지 다룹니다.
“프론트엔드에서 막으면 잘못된 요청은 안전하다”
화면 검사는 사용자를 돕기 위한 것이고, 중요한 권한과 업무 조건은 백엔드에서도 다시 확인해야 합니다.
“프론트엔드와 UI는 같은 말이다”
UI는 사용자가 만나는 화면 요소이고, 프론트엔드는 그 UI를 실제로 동작하게 구현하는 개발 영역입니다.
우리 서비스에 적용할 때 확인하세요
- 1지원할 앱·웹·운영체제와 최소 화면 크기를 정했나요?
- 2로딩·빈 상태·오류·완료 상태가 모두 구현되어 있나요?
- 3서버 응답이 늦거나 끊겼을 때 중복 요청과 다시 시도를 처리하나요?
- 4키보드, 화면 확대와 보조 기술로도 주요 기능을 사용할 수 있나요?
- 5화면에 민감한 정보나 비밀 설정이 포함되지 않았나요?
다음 자료
이해한 내용을 바로 적용해보세요
프론트엔드가 구현하는 UI, 데이터를 주고받는 API와 화면 뒤에서 처리하는 백엔드의 역할을 함께 확인할 수 있습니다.
프론트엔드와 백엔드가 만나는 전체 흐름을 살펴보세요
고객 화면의 행동이 서버 확인과 데이터 저장, 관리자 처리로 이어지는 과정을 한 번에 볼 수 있습니다.