누구에게나 처음은 있기 마련이듯이, 이제 막 프로젝트를 시작하는 사람들에게 있어서 프론트와 백의 구분은 어렵다는 것을 누구보다 잘 아는 나이기에 끄적끄적 IT 서비스 개발의 큰 그림을 정리해보려 한다. 나 같은 개발 어린이들이 이 포스트를 보고 조금이나마 감을 잡을 수 있다면 좋겠다.
👩💻 프로젝트 구성원 역할
우선 기본적으로 프로젝트를 구성하는 역할은 '기획, 디자이너, 프론트, 백, (서버)개발자'가 있다. 혹은 프론트와 백엔드 개발자끼리 기획과 디자인을 같이 하고 개발에 참여하는 경우도 있긴 하지만, 경험이 있는 기획자와 디자이너가 있다면 개발에 더 힘을 쏟을 수 있긴 하다.
1. 기획자 : 프로젝트 아이디어 기획 뿐만 아니라 개발 외의 서류 작성이나 회의 진행 등을 담당하는 비지니스 리더 역할이다. 진행 상황을 파악하고 관리하는 역할로, Project Manager(PM) 이라고 부르기도 한다.
2. 디자이너 : 앱이나 웹의 디자인을 담당한다. 서비스의 UI/UX를 담당하는 프론트 개발자와 상호작용이 많은 편이고, 보통 피그마(Figma) 같은 디자인 툴로 작업을 한다. 기획하면서 앱이나 웹의 각 화면에 들어가야 하는 정보를 모아둔 IA(Information Architecture)를 참고하여 디자인을 구성한다. (IA가 나와야 디자인이 가능하다 == 기획->디자인->개발 순서인 셈)
3. 프론트 개발자 : 사람들에게 보이는 것들의 개발을 담당한다. 디자이너가 설정한 빨강, 초록 등 색상 코드부터 텍스트 폰트, 사이즈, 위치, 특정 버튼을 눌렀을 때 어떤 함수를 동작해야 하는지까지. 디자인을 구현하는 작업이기 때문에 디자이너와 얘기를 많이 하지만, 로그인을 하고 받는 회원 토큰 등 백에서 돌아가는 데이터를 받아야 하기도 하므로 백엔드 개발자와도 얘기를 많이 한다. 디자인과 서버를 잇는 작업이라고 볼 수 있겠다.
4. 백엔드 개발자 : 사람들이 보지 않는 개발자들의 영역을 담당한다. 백엔드의 가장 주요 과업 중 하나는 다량의 데이터를 처리한다는 것이다. DB(Database)를 관리하는데, 네이버라는 하나의 사이트 안에서도 사용자 A와 B가 가지고 있는 데이터(메일함, 클라우드 사진들 등)는 천차만별로 다르고 이는 모두 DB에 저장된다. 프론트가 '사용자 A의 메일 데이터'를 서버에 요청하면 백엔드는 크나큰 DB에서 해당 데이터를 찾아 프론트로 보내는 역할을 하는 셈이다. (물론 이것말고도 하는 일은 많다.)
* 서버 개발자 : 보통 백엔드가 서버까지 담당하긴 하나, 규모가 좀 되는 프로젝트 같은 경우에는 서버 담당자와 백엔드 개발자가 나누어져 있는 경우도 있다. 대부분은 백 == 서버라고 생각해도 무방하다.
🎨 프론트 개발자가 하는 일
1. UI 구현하기
(일단 UI/UX, 이렇게 같이 말하는데 보통 어떤 시각적인 요소를 구현한다고 할 때는 UI를 구현한다고 하고, UX를 구현한다는 말을 별로 쓰지 않는다. UX는 개념적인? 사람들이 좀 더 효율적으로 사용할 수 있도록 하는 어떤 것인데 개념을 위한 개념이라 생각하면 된다.)
디자이너가 작업한 디자인들을 보고 색상부터 폰트, 요소(버튼, 표, 텍스트 등)의 위치까지 코드로 구현한다. 이때는 서비스의 기기(앱/웹)에 따라 개발 환경이 달라진다. 앱의 경우에는 '안드로이드 스튜디오'를 사용하면 코드를 짜면서 폰 환경에서 어떻게 보이는지 시뮬레이터를 돌릴 수 있고, 웹의 경우에는 VScode, Intellij를 사용하여 개발한다. 특히 Intellij는 내가 사용하려는 프레임워크에 따라 프로젝트 기본 파일들을 세팅해주기 때문에 추천! (프레임워크는 뒤에 설명)
2. mock data 세팅
가짜 데이터라고 한다. 실제 사용자들이 서비스를 사용하기 전이므로, 게시물 목록 페이지 등을 구현할 때는 이를 표현할 가짜 데이터들이 필요하다. 백엔드에서 가짜 데이터를 DB에 넣어 보내줄 수도 있긴 하지만 api 명세가 확정되지 않았는데 디자인을 먼저 구현하고 싶다거나, mock data를 본인 마음대로 설정하고 싶으면 세팅하면 된다.
3. API 연동
백엔드에서 주는 Dto(데이터 구조라고 보면 된다, 학생이라는 객체를 전달할 때 name, address, phone, gender 이렇게 줄게~ 라고 약속하는 것)에 맞춰서 서버와 통신할 때 어떤 주소,로 어떤 내용을 통신할지 결정하는 게 api이다. HTTP Method + Request URL + Request/Response Data Type (Dto) 으로 선언을 한다.
HTTP Method : 서버의 DB에 post(데이터 넣기), get(데이터 조회), fetch 등 어떤 '동작'을 수행할 것인지
Request URL : ex) http://iamMockServer.mock.server.com(서버주소)/api/students : /api/students 주소로 get 요청을 보내면 학생 정보가 나오는 등, 서버와 약속한 api 명세에 따라 주소를 설정하면 서버와 통신할 수 있는 길이 주어지는 개념이다.
💻 백엔드 개발자가 하는 일
1. API 명세 작성
우리가 사용하는 대부분의 컴퓨터 서비스는 서버와 클라이언트로 나뉜다. 클라이언트(서비스를 사용하는 우리)가 서버에 어떤 데이터를 요청하면(데이터를 넣거나 가져오거나 아무거나) 서버에서 해당 신호를 받아서 데이터를 주든가 말든가 동작한다. 서버에서 클라이언트로 알아서 데이터를 보내주는 '웹훅'도 있긴 하지만, 일반적으로는 클라이언트에서 서버로 요청을 보내야 데이터로 응답한다고 생각하면 된다. 우리가 친구집에 놀러갈 때 주소가 필요한 것처럼, 클라이언트에서도 많고 많은 서버 중 어느 서버에 요청을 보낼지 주소가 필요하다 == 서버 주소. 서버 주소에 접속해서 어느 api를 사용해 내가 무슨 데이터를 원하는지 전달해야하는지를 정해야하고, 이는 백엔드와 프론트에서 확정지은 api 명세에 따른다 (보통 백엔드에서 쓰긴함) 클라이언트에서 요청 보낼 api 주소 + HTTP 메서드 + request/response DTO + 응답 코드 (보통 200이면 ok, 400대 에러: 권한 관련 에러, 500대: DB나 서버 에러로 구성) 로 명세가 구성되어 있다.
2. 서버 및 DB 구축
그럼 바로 그 서버는 대체 어떻게 만들어지느냐. 서버는 처음부터 클라우드 서버를 사용할 수도 있고, 로컬에 서버를 만들어서 클라우드 환경으로 배포할 수도 있다. 차근차근 알아보자
1. 로컬 DB vs 클라우드 DB
클라우드로 올리는 것을 '배포한다'고 표현한다. 그럼 서버를 배포해야 하는 이유가 무엇이냐. 1PC당 1서버라고 생각하면 된다. 클라이언트에서 요청을 보낼 때 언제든지 응답할 수 있는 컴퓨터가 필요한데 이는 서버가 24시간 내내 쉬지 않고 켜져서 우리의 요청을 기다리고 있다는 뜻이다. 우리가 로컬(당신이 사용하고 있는 본인 컴퓨터) 환경에서 서버를 구축해도 되지만 이걸 24시간 내내 켜둘 수도 없고 개인이 사용하는 IP 주소는 개인 private한 주소이기 때문에 외부에서 접근하기 어렵다.
-> 그래서 전세계적으로 접근이 가능하고 (외부 IP 주소 사용), 24/7 상시 켜둘 수 있는 환경이 필요한데, 이는 AWS 같은 서비스에서 클라우드로 서버를 올려놓을 수 있는 기능을 제공한다. 그럼 내 컴퓨터가 꺼지더라도 서버는 클라우드 환경에서 돌고 있기 때문에 아무런 영향을 미치지 않는 것.
2. DB 구축
서버는 데이터를 관리하는 컴퓨팅 환경이라고 생각하면 된다. 서버를 돌리기 위해선 DB도 켠 상태로 돌려야 하는데, 이때 DB는 MySQL, PostgreSQL 등 종류가 있고 DB 환경이 돌고 있어야 데이터가 변경(post,get,fetch 등)이 가능한 상태이기 때문에, 서버를 켤 수 있다. (서버를 켠다는 건 데이터의 통신이 일어날 준비가 되어야 한다는 것)
DB는 일반적으로 'table(표)' 형식으로 구성된다. 학교와 관련된 DB를 구성한다고 하면 teachers, students, major, course 등 테이블이 있을 수 있겠다. 각 테이블은 columns와 rows로 이루어지는데 columns의 종류와 데이터 형식을 지정해야한다. (students 테이블은 student_id, student_name, student_phone으로 구성되게 하겠다! 이런거) 해당 데이터가 쌓이면 row의 항목이 많아지는 것이고, 각 테이블간의 연산이나 병합 같은 추가적인 작업도 필요하지만 이는 다음에 얘기하겠다.
3. API 개발
1번에서 얘기한 API 명세에 따라 개발을 진행한다. 엔드포인트 주소(클라이언트에서 날리는 요청 주소)를 세팅하고, 각 api에 사용되는 DB와 데이터 구조를 정리하며, 어느 api 요청이 왔을때 어떻게 응답할 것인지 코드로 짜는 과정이다. 잘 짜여진 명세만 있으면 대부분 노가다의 과정이다.
❓사담: 진로 결정은 항상 어려운 법
1학년 때도 그렇고, 지금도 그렇고 IT 분야는 정말 다양한 분야로 나뉜다. 프론트/백엔드/앱(안드로이드/iOS)/클라우드/AI/보안/데이터 분석 등,, 주변에서 본인의 진로를 찾아가는 친구들 곁에서 과연 내 진로는 언제쯤 찾을 수 있을까 꽤 조바심을 냈던 것 같다. 정말 여러 동아리와 다양한 프로그램, 다양한 학과 수업을 들어봤지만 그렇게 흥미가 생기는 것이 없어서 난 컴공이 안 맞구나 생각하기도 했다.
하지만 학교 동아리나 외부 프로젝트에서 본격적인 개발을 해보면서 되게 공부할 게 많다는 것을 느꼈고 하나하나 알아가고 적용해보는 것에 흥미를 느낀 것 같다. 하나의 문제에 대해 바로 지피티한테 물어보는 것보다 에러가 난 원인에 대해 가설을 세우고 맞는지 확인해보며 고민하는 시간을 늘릴수록 그만한 인사이트를 얻을 수 있었다. 그래서 최대한 AI를 안 쓰고 개발을 해보고 싶었는데 학교 프로젝트 n개, 학업 병행, 회사 개발 작업까지 맡다보니 물리적인 시간이 부족해 AI를 많이 쓰고 있다. 그래도 배우는 것은 있다. 현재의 AI에게 어디까지 요청해야 효율적으로 일을 처리할 수 있는지, 특히 디자인 쪽에서는 어떻게 말해야 알아듣는지, 근데 뭐 끝까지 알아듣지 못하면 그 부분은 나의 역할인 것,, 아무튼. 이번 2학기가 끝나면 도 닦듯이 온전히 나의 개발 풀에만 집중해서 뭔가를 또 깨닫는 시간으로 쓰고 싶다. 오래 궁리하고 얻은 그 인사이트가 나에겐 참 값진 것이었어서, 이런 뿌듯함 때문에 개발을 하는게 아닐까 싶다.
백엔드와 AI를 공부해서 진정한 풀스택이 되어보고 싶다. 서버 구축부터 배포, ML/DL의 흐름을 파악해서 대부분의 분야를 아우를 수 있는. 앱과 웹을 함께 관리하는 풀스택 기술 관리를 하는 것이 현재 내가 바라는 나의 모습이다.
✏️ 사담
<앱>
내가 가장 사랑하는 언어와 프레임워크는 Kotlin Jetpack Compose이다. 안드로이드 개발 환경으로 자바에서 개발한 Kotlin이라는 언어로 안드로이드 앱을 개발하는 것이다. 웹 개발보다 버전과 관련된 에러가 많아서 초기 세팅하거나 빌드할 때 꽤 애를 먹긴 하지만 이게 한 번 잡히면 Column, Row로 하나의 화면을 디자인해가는 과정이 시간이 지나는걸 느끼지 못할만큼 재밌다. 앞으로 프론트가 AI에게 대체된다면 이런 작업을 하는 빈도가 그만큼 줄어들 것 같아 아쉽긴 하지만 코틀린 개발 시간은 내가 가장 좋아하는 시간이다.
요즘에는 Flutter를 배워볼까 생각도 한다. 코틀린을 사랑해서 안드로이드에 특화되어 있지만, React Native로도 개발을 해본 적이 있어 크로스 플랫폼 개발이 가능하긴 하다. 하지만 실무에 있어보니 개발 요구 업체들 중 Flutter를 선호하는 업체가 꽤 있다는 것을 느꼈다. React로 웹 개발을 계속 하다보니 상태 관리하는 측면에서도 React Native가 편해서 그쪽으로 했는데 Flutter도 Dart(JS기반)언어고 안정적으로 UI를 고도화할 수 있는 것 같아 흥미가 생긴다. 시간이 생긴다면 Flutter 공부를 해봐야겠다.
<웹>
React와 TypeScript를 고수한다. 본격적인 웹 개발을 할 때 시작한 환경이 리액트인데, 자바스크립트에서 데이터 타입의 안정성이 추가된 게 타입스크립트이긴 하지만, 아직까지 TS에서도 데이터 타입 이슈가 약간씩 보여서 좀 손이 안 가긴 한다. 커서를 써보면서 웹 프론트 개발은 이제 정말 AI에 대체되는게 머지않았구나 느낀다(아쉽게도ㅜㅜ) 물론 첨부한 디자인과 커서에서 개발한 프론트의 일치성은 좀 떨어지긴 하지만 api 명세만 주면 기본적인 세팅은 다 해준다. 세팅되어 있는 것에서 세부적인 사항들을 맞추는 작업을 하고 있다. 과연 미래의 AI모델이 우리가 첨부한 디자인과 100% 일치하는 프론트를 만들어줄 수 있을까?