개발 기술 · 더 알아보기 · 직접 체험형

앱 화면을 실제 기능으로 구현하는 개발 과정

화면 항목부터 API와 데이터 구조, 서버 구현과 화면 연결까지 같은 기능을 기준으로 개발합니다. 작업 등록 한 건을 만들고 다시 조회하는 예시로 단계별 판단과 산출물을 살펴봅니다.

개발 단계·직접 등록 함께 보기쉽게 보는 핵심 기준

먼저 이해할 내용

입력·요청·저장·결과가 같은 기능을 가리키도록 개발합니다

등록 기능의 완료 기준을 정하고 입력 규칙과 API 명세, 저장 구조를 맞춥니다. 서버와 화면을 연결한 뒤 실제 저장 결과를 별도로 다시 읽어 확인합니다. 아래 가상 작업 예시는 방문자별로 분리된 체험 API와 임시 저장소를 사용합니다.

  1. 01

    입력 규칙과 API 설계

  2. 02

    저장 구조와 서버 구현

  3. 03

    화면 연결

  4. 04

    등록·재조회 검증

실제 흐름으로 이해하기

작업 등록 하나가 실제 기능이 되는 과정

입력 항목을 정하고, 요청과 저장 구조를 맞춘 뒤 화면에 연결합니다. 각 단계의 판단을 살펴보고 직접 등록·재조회해 보세요.

가상 개발 예시 · 이 브라우저의 체험 기록만 별도 서버 저장소에 등록·조회합니다. 개인정보는 입력하지 마세요.

단계 1 / 6 · 기능 정의

버튼보다 먼저, 등록의 완료 기준을 정합니다.

작업명은 필수, 내용은 선택으로 정합니다. 새 작업이 저장되고 같은 번호로 다시 조회되어야 등록이 연결된 것으로 봅니다. 접수는 실제 작업 완료와 구분합니다.

이 단계의 결과물입력 규칙과 완료 기준

이 규칙을 API의 입력·결과·오류에 연결합니다.

기능 정의서의 핵심

작업명
필수 문자열앞뒤 공백 제거 후 1~80자
내용
선택 문자열없으면 빈 문자열 · 최대 500자
등록 결과
작업 번호 + 접수 상태서버가 저장한 뒤 반환
완료 기준
등록한 작업을 같은 번호로 재조회

이 예시의 ‘접수’는 작업을 수행했다는 뜻이 아닙니다.

단계별로 만드는 결과물

설계한 값을 구현하고 결과로 확인합니다

앱의 등록 기능을 개발할 때는 화면의 입력 항목, 서버로 보내는 데이터, 저장 구조와 결과 화면을 함께 맞춥니다. 작업명을 입력하고 ‘등록’을 눌렀을 때, 그 내용이 저장되고 나중에도 같은 작업을 다시 볼 수 있어야 하나의 기능이 완성됩니다.

이 글에서는 데브크래프트의 개발 방식을 설명하는 가상 작업 등록 예시로, 화면 설계가 API 설계·데이터 구조·서버 구현·화면 연결·검증으로 이어지는 과정을 살펴봅니다. 각 단계에서 무엇을 정하고, 다음 단계에 어떤 결과물을 전달하는지 보여드립니다.

예시의 작업명은 ‘안내판 교체’, 내용은 ‘입구 안내판을 새 디자인으로 교체해주세요’입니다. 입력한 작업명·내용이 저장·응답·재조회에서 이어지는지 확인합니다. 등록 뒤에는 서버가 돌려준 번호로 같은 작업을 구분하며, 이 예시의 번호는 1042라고 해보겠습니다.

개발 단계 01

화면에서 입력할 항목과 기능의 완료 조건을 정합니다

먼저 화면에 필요한 항목과 각 항목의 뜻을 정합니다. 이번 예시에는 작업명과 내용, 등록 버튼이 있습니다. 작업명은 필수이고 내용은 선택입니다.

산출물과 다음 단계

이 단계의 결과물은 입력 화면과 항목 규칙, 등록·재조회가 이어지는 사용 흐름입니다. 이후 API와 데이터 구조를 설계할 때 같은 항목을 기준으로 삼습니다.

항목 규칙과 완료 조건 살펴보기

입력 항목을 정할 때는 데이터 형식과 허용 범위도 함께 정합니다. 작업명에 공백만 들어온 경우를 허용할지, 내용이 비어 있으면 무엇을 저장할지, 입력 길이는 어디까지 받을지 앱과 서버가 같은 규칙을 사용해야 합니다. 이 예시에서는 공백만 있는 작업명은 받지 않고, 비어 있는 내용은 빈 문자열로 다룹니다.

작업명

사용자가 입력하는 값
안내판 교체
개발에서 정할 기준
필수 문자열, 앞뒤 공백 제거 후 빈 값 불가

내용

사용자가 입력하는 값
입구 안내판을 새 디자인으로 교체해주세요
개발에서 정할 기준
선택 문자열, 비어 있으면 빈 문자열

등록 결과

사용자가 입력하는 값
사용자가 입력하지 않음
개발에서 정할 기준
서버가 작업 번호·접수 상태·등록 시각을 반환

이번 기능의 완료 조건은 서버가 저장을 확정하고 작업 번호를 돌려주며, 그 번호로 같은 내용을 다시 조회할 수 있는 것입니다. ‘등록 완료’는 작업 요청을 저장했다는 뜻이고, 실제 안내판 교체 작업까지 끝났다는 뜻은 아닙니다. 그 업무 상태는 ‘접수’로 구분합니다.

개발 단계 02

앱과 서버가 주고받을 요청·응답을 설계합니다

API는 앱이 서버에 작업을 요청하고 결과를 받는 연결 방식입니다. 화면 개발과 서버 개발이 서로 다른 이름이나 형식을 사용하지 않도록 보낼 값, 받을 값, 오류일 때 받을 안내를 먼저 맞춥니다.

산출물과 다음 단계

이 단계의 결과물은 API 주소·입력 형식·성공 결과·알려진 오류를 정리한 명세입니다. 화면 개발자는 어떤 값으로 화면을 바꿀지, 서버 개발자는 무엇을 확인하고 반환할지 같은 자료를 사용합니다.

요청·응답 명세 살펴보기

이번 예시에서는 다음과 같이 정합니다. 아래 주소와 필드명은 이 예시를 위한 설계입니다.

등록 요청

정한 요청·응답
POST /work-requests — 작업명 title, 내용 description 전달

등록 성공 응답

정한 요청·응답
서버가 저장한 작업 번호 id, 작업명, 내용, 접수 상태, 등록 시각 반환

입력 오류 응답

정한 요청·응답
잘못된 항목과 수정할 이유를 반환. 작업명 공백이면 등록하지 않음

상세 조회

정한 요청·응답
GET /work-requests/1042 — 서버에 저장된 같은 작업의 내용 반환

앱에서 입력한 두 항목과 서버가 정하는 값을 구분합니다. 작업 번호와 최초 상태, 등록 시각을 앱이 임의로 정해서 저장시키는 방식으로 만들지 않습니다. 서버의 처리 결과를 앱이 받아 같은 기준으로 표시하도록 연결합니다.

이런 요청·응답은 예시 데이터와 함께 명세로 남깁니다. OpenAPI는 HTTP API의 요청과 응답을 기술할 수 있는 표준 형식 중 하나입니다. 명세를 만들었다는 것과 서버를 구현했다는 것은 별개이며, 구현 결과가 이 약속과 맞는지 확인해야 합니다.

개발 단계 03

등록과 재조회에 필요한 데이터 구조를 만듭니다

다음은 저장할 값과 그 값을 구분할 기준을 설계합니다. 화면에 보이는 이름만 저장하면 나중에 같은 이름의 다른 작업을 구분하기 어렵습니다. 그래서 각 작업을 식별할 번호가 필요합니다.

산출물과 다음 단계

이 단계의 결과물은 저장 항목·형식·기본값·제약과 작업 번호로 조회할 구조입니다. API의 이름과 데이터베이스의 이름이 다르더라도 무엇이 어디에 저장되는지 연결을 명확히 합니다.

저장 항목과 제약 살펴보기

작업 번호

저장할 내용
이 예시에서는 1042
사용 목적
같은 작업을 조회하고 연결하는 고유 기준

작업명·내용

저장할 내용
서버가 확인한 입력값
사용 목적
등록한 요청의 내용 보관

업무 상태

저장할 내용
최초에는 접수
사용 목적
요청 등록과 실제 업무 완료 구분

등록 시각

저장할 내용
서버에서 정한 시각
사용 목적
등록 순서와 기록 확인

작업 번호의 고유성과 필수값 같은 기준은 서버 코드뿐 아니라 데이터베이스의 제약으로도 맞춥니다. 예를 들어 관계형 데이터베이스의 기본키는 기록을 고유하게 식별하는 기준입니다. 이 예시에서 어떤 저장소를 사용할지는 조회 방식·운영 조건에 맞춰 결정합니다.

개발 단계 04

서버에서 입력 확인·저장·결과 반환을 구현합니다

서버는 정한 API 요청을 받아 입력값과 요청자의 접근 조건을 확인하고, 허용된 값을 데이터베이스에 저장합니다. 앱에서 입력 오류를 안내하더라도 서버에서도 같은 핵심 규칙을 확인합니다. 화면을 거치지 않은 요청도 들어올 수 있기 때문입니다.

산출물과 다음 단계

이 단계의 결과물은 실제 요청을 받아 저장·조회하고 약속한 결과를 반환하는 서버 처리와 그 검사입니다. 결과를 화면에 보여주는 일과 저장을 책임지는 일을 구분해 연결합니다.

서버 처리 순서와 오류 살펴보기

이번 예시의 서버 처리 순서는 다음과 같습니다.

  1. 작업명과 내용의 형식을 확인하고 작업명의 앞뒤 공백을 제거합니다.
  2. 작업명이 비었거나 허용되지 않는 요청이면 오류를 반환하고 등록하지 않습니다.
  3. 통과한 값으로 새 작업을 저장하고 작업 번호·접수 상태·등록 시각을 연결합니다.
  4. 저장이 확정된 작업을 성공 응답으로 반환합니다.

등록 API와 상세 조회 API는 같은 작업 번호와 저장 구조를 사용합니다. 등록 때 받은 1042를 조회하면 ‘안내판 교체’와 같은 내용이 돌아와야 합니다. 조회할 때도 요청자가 그 기록을 볼 수 있는지 서버에서 확인합니다.

서버가 알려진 저장 실패를 반환했을 때는 등록 성공으로 안내하지 않습니다. 응답을 받지 못해 저장 여부를 알 수 없는 경우에는 결과가 확정되지 않은 상태로 다뤄야 합니다. 이때의 결과 확인과 재시도는 요청 실패·중복 처리 과정에서 이어 설명합니다.

개발 단계 05

화면을 API 결과에 맞춰 연결합니다

화면에서는 입력값을 요청 형식으로 변환해 API를 호출하고, 처리 중·입력 오류·등록 결과를 구분해 보여줍니다. 등록 버튼을 누르면 먼저 ‘등록 중’으로 바꾸고, 성공 응답을 받은 뒤 서버가 돌려준 작업 번호와 접수 상태를 표시합니다.

산출물과 다음 단계

이 단계의 결과물은 입력 화면·API 호출·응답 처리·상세 조회가 이어지는 기능입니다. 화면 디자인의 버튼과 상태 문구가 서버의 처리 결과에 대응합니다.

응답에 맞춘 화면 연결 살펴보기

작업명 오류가 오면 해당 입력 항목 옆에 수정할 이유를 안내하고, 작성한 내용은 유지합니다. 저장 실패나 결과 미확정 상황도 등록 완료와 구분합니다. 이 상태를 API 명세와 맞춰 두면 화면이 서버의 실제 결과와 다른 성공 안내를 보여주는 문제를 줄일 수 있습니다.

등록 성공 후에는 1042의 상세 화면으로 이어지도록 연결합니다. 상세 화면의 작업명·내용·상태는 조회 API의 결과로 표시합니다. 입력 화면에서 임시로 가지고 있던 값만 계속 보여주면 저장·조회 연결을 확인하기 어렵습니다.

개발 단계 06

화면·API·저장 데이터를 한 기능으로 검증합니다

마지막에는 각 부분의 연결을 실제 결과로 확인합니다. 이 예시에서는 같은 작업 번호로 다음을 대조합니다.

저장·재조회 검증 기준 살펴보기

정상 입력으로 등록

확인할 결과
성공 응답의 작업 번호와 저장된 작업 번호가 일치

작업명에 공백만 넣어 요청

확인할 결과
입력 오류가 반환되고 새 작업은 저장되지 않음

내용 없이 등록

확인할 결과
정한 빈 문자열 규칙이 응답과 저장 결과에 동일하게 적용

화면을 새로 열어 1042 조회

확인할 결과
저장된 작업명·내용·접수 상태를 다시 읽어 표시

저장 실패를 확인한 경우

확인할 결과
등록 완료를 표시하지 않고 작성 내용과 다음 행동을 안내

화면 검사에서는 안내와 상태 변화가 맞는지 보고, API 검사에서는 요청·응답이 명세와 맞는지 봅니다. 연결 검사에서는 실제 저장과 별도의 재조회를 대조합니다. 화면에 미리 넣어 둔 결과를 보여주는 시연으로 데이터베이스 저장까지 검증했다고 판단하지 않습니다.

소개한 단계는 같은 기능의 화면·서버·데이터를 맞추는 설명 순서입니다. 실제 개발에서는 API와 저장 구조를 함께 조정하고 검증에서 발견한 문제를 앞 단계에 반영합니다. 언어와 프레임워크는 서비스 조건에 맞춰 선택하되, 입력 규칙·요청·저장·응답·재조회가 같은 기능을 가리키도록 구현하고 확인하는 것이 이 개발 과정의 핵심입니다.

확인할 내용

이 내용을 보면 알 수 있습니다

  • 화면 항목이 API 명세와 저장 구조로 이어지는 과정
  • 서버가 저장한 결과에 맞춰 앱 화면을 연결하는 방법
  • 실제 저장과 별도 재조회로 한 기능을 검증하는 기준

판단 기준

실제 구현에서는 이렇게 확인합니다

  1. 01입력 규칙과 요청·응답 형식이 앱과 서버에서 같은가
  2. 02저장 성공 이후 번호와 접수 상태를 반환하는가
  3. 03새 화면에서 같은 작업 번호로 저장된 내용을 다시 읽는가

우리 서비스의 기능과 개발 구조를 함께 살펴보세요

만들려는 화면과 사용자가 완료해야 할 일을 알려주세요. 필요한 API와 저장 항목, 서버 처리와 화면 연결, 검증할 결과를 30분 상담에서 함께 정리합니다.

30분 무료 상담 신청
앱이 만들어지는 방식으로 돌아가기