한 시간 만에 개발 기초 다지기: 풀스택 이해로 코딩 장벽 넘는다

코딩 학습의 궁극적인 목표는 코딩의 순수한 목적을 따르는 것입니다. 중간 목표를 명확히 설정하면 학습 과정에서 마주하는 장애물을 쉽게 극복할 수 있습니다. 반면, 명확한 목표 없이 학습을 진행하면 단순한 반복 작업으로 느껴져 흥미를 잃고 고난의 연속으로 받아들여질 수 있습니다.

코딩 용어 하나하나를 완벽하게 이해하려고 집착할 필요는 없습니다. 국어의 격조사나 보조사를 완벽히 알지 못해도 의사소통에 문제가 없듯이, 코딩 용어도 마찬가지입니다. 모든 용어를 완벽하게 이해하는 순간은 오지 않으므로, 전체적인 흐름을 파악하며 학습하는 것이 중요합니다. 투더제이는 "용어 하나하나마다 집요하게 알 필요가 전혀 없습니다 그렇게 하면 아예 잘할 수가 없어요"라고 강조합니다.

코딩은 코드를 작성하는 행위 자체를 의미하며, 프로그래밍은 코딩을 포함해 프로그램을 완성하는 데 필요한 모든 활동을 포괄하는 개념입니다. 하지만 실무에서는 이 두 용어를 거의 같은 의미로 혼용하여 사용해도 무방하다고 설명합니다. 투더제이는 "코딩은 코드를 짜는 그 행위 자체 프로그래밍은 코딩을 포함한 프로그램을 완성하는데 필요한 모든 행위의 개념이지만 그냥 같다고 생각하셔도 무방하겠습니다"라고 말합니다.

웹앱은 웹사이트를 애플리케이션처럼 사용할 수 있도록 만든 것입니다. 이러한 웹앱은 주로 유틸리티적 성격이 강하여 특정 작업을 수행하는 도구로 활용됩니다. 대표적인 예시로는 네이버 파파고와 같은 번역 서비스가 있으며, 이는 웹 환경에서 앱과 같은 편리한 사용자 경험을 제공합니다.

프론트엔드는 사용자의 눈에 직접 보이는 화면, 즉 웹이나 앱의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당합니다. 반면, 백엔드는 사용자의 눈에 보이지 않는 부분에서 데이터 처리, 서버 로직, 데이터베이스 관리 등을 수행합니다. 이 두 영역은 API(Application Programming Interface) 호출을 통해 데이터를 주고받으며 상호작용합니다.

사용자가 웹이나 앱에서 특정 기능을 사용하면 프론트엔드는 백엔드로 필요한 데이터를 요청하고, 백엔드는 이 요청을 처리하여 결과를 다시 프론트엔드로 전달하는 방식으로 작동합니다. 투더제이는 "프론트엔드는 사용자의 눈에 보이는 화면 앱 화면 웹 화면이고요 백엔드는 눈에 안 보이는 거예요"라고 설명하며 두 영역의 차이를 명확히 합니다.

개발자가 특정 영역, 예를 들어 프론트엔드나 백엔드 중 한 가지만 배우는 것은 반쪽짜리 지식에 불과합니다. 진정한 개발 역량을 갖추기 위해서는 프로젝트 전체를 아우르는 시야를 기르는 것이 필수적입니다. 최근 개발 트렌드는 프론트엔드와 백엔드 모두를 이해하고 다룰 수 있는 풀스택 역량을 중요한 차별화 요소로 간주하고 있습니다.

이는 전체 서비스 구조와 동작 원리를 파악하여 문제를 해결하고 효율적인 개발을 가능하게 합니다. 투더제이는 "프론트엔드건 백핸드건 다 하는게 너무 당연합니다 진짜 개발을 위해서 있거든요"라고 강조하며 통합 학습의 중요성을 역설했습니다.

SI(시스템 통합) 분야에서 오랜 경력을 쌓은 개발자라 할지라도, 주로 데이터베이스 관리에 집중하다 보면 CSS(Cascading Style Sheets)와 같은 프론트엔드 기술에 미숙한 경우가 많습니다. 이러한 개발자들은 깊이 있는 개발 지식을 가지고 있지만, 한 명의 개발자가 전체 서비스를 구축하고 운영하는 데에는 한계가 따릅니다.

투더제이는 "결론적으로 오랜 기간 SI에서 일을 했다 하더라도 개발에 깊이는 있겠지만 CSS를 잘못 보는 개발자들이 꽤나 많이 있습니다 이분들은 오랜 경력을 가지고 있음에도 안타깝지만 본인 혼자 서비스를 만들고 운영하는 데까지는 쉽지 않죠"라고 설명하며 특정 분야에 특화된 경력의 단면을 지적합니다.

HTML과 CSS를 공부할 때는 세부 내용을 암기하려 하기보다는 전체 흐름을 훑어보는 방식으로 접근하는 것이 효과적입니다. 처음부터 깊이 파고들기보다 얕고 빠르게 전체를 경험하는 것이 중요하며, 실제 개발 프로젝트를 진행하면서 필요한 지식이 자연스럽게 습득됩니다. 학습의 최종 단계에서는 직접 결과물을 만들어보는 경험을 통해 실제 적용 능력을 기르는 것이 강조됩니다.

투더제이는 "html css 공부법은 그냥 쭉 보는 거예요 막 외우려고 노력하지 않아도 충분합니다 깊게 할 수도 있지만 처음에는 얕고 빠르게 하는 것이 절대적인 방법입니다"라고 조언합니다.

프론트엔드는 사용자의 직접적인 경험에 큰 영향을 미치며, 디자인과 인터랙션에 따라 서비스의 인상이 크게 달라질 수 있습니다. 반면, 백엔드 구조는 보안, 성능, 데이터 처리 방식 등 핵심 기능 면에서 비교적 보편적인 형태를 가집니다. 동일한 백엔드 구조를 활용하더라도 프론트엔드를 다양하게 구현함으로써 사용자에게는 완전히 다른 서비스로 인식될 수 있습니다.

투더제이는 "그런데 백엔드 구조는 거의 동일하거든요 비슷한 백엔드로 다른 프론트엔드를 만드는 거죠 프론트엔드에 따라서 서비스가 사용자에게는 전혀 다른 서비스로 느껴질 수 있습니다"라고 말하며 두 영역의 특성을 설명했습니다.

클라우드는 가상 서버를 통째로 임대하는 방식으로, 사용자가 대시보드를 통해 하드웨어 추가나 트래픽 조절을 유연하게 설정할 수 있는 것이 핵심입니다. 이는 실제로 PC를 통째로 빌리는 것과 유사한 시스템을 제공합니다. 서버 호스팅은 서버 장비 전체를 임대하여 사용하는 방식으로, 보통 전문 업체가 서버 관리를 대행해줍니다.

이와 달리 웹 호스팅은 웹사이트를 운영하기 위해 서버의 특정 폴더 하나만을 빌려 사용하는 가장 제한적인 방식입니다. 이 방식은 비교적 저렴하지만, 사용자가 제어할 수 있는 범위가 매우 좁고 확장성에 한계가 있습니다.

각 호스팅 방식은 비용, 관리의 용이성, 확장성 등 여러 측면에서 차이가 있어 서비스의 규모와 목적에 따라 적절한 선택이 필요합니다. 클라우드는 유연한 확장이 필요한 대규모 서비스에 적합하며, 웹 호스팅은 소규모 개인 웹사이트에 주로 사용됩니다.

자바(Java)는 대형 서비스 및 금융권에서 주로 사용되며 안정성과 확장성이 강점인 백엔드 언어입니다. 반면, 노드JS(Node.js)는 자바스크립트를 기반으로 서버를 구현할 수 있게 해주는 기술로, 프론트엔드 개발자가 백엔드까지 쉽게 확장할 수 있도록 돕습니다. 자바와 자바스크립트는 이름은 비슷하지만 전혀 다른 언어이므로 혼동해서는 안 됩니다. 진행자는 "자바스크립트랑 상관이 있는 백엔드 언어는 노드 js입니다 내가 자바스크립트만 파겠다 이러면 노드 js만 하시면 돼요"라고 설명하며, 학습 방향에 따른 언어 선택 기준을 제시했습니다.

개발 언어를 선택할 때는 비주류 언어보다는 주류 언어를 선택하는 것이 매우 중요합니다. 주류 언어는 사용자층이 넓고 커뮤니티가 활성화되어 있어, 개발 과정에서 발생하는 문제에 대한 해결책이나 레퍼런스를 쉽게 찾을 수 있기 때문입니다. 비주류 언어는 정보가 부족하여 문제 해결에 어려움을 겪을 수 있습니다.

진행자는 "한 가지 염두해야 할 것은 비주류가 아닌 주류를 해야 한다는 것입니다 그 이유는 주류를 해야 내가 모르는 것이 나와도 검색을 할 수 있기 때문이죠"라고 강조하며, 효율적인 학습과 문제 해결을 위해 주류 언어 선택의 필요성을 역설했습니다.

특히, 독학하는 개발자에게는 검색을 통한 학습이 필수적이므로, 정보 접근성이 높은 주류 언어가 더 유리합니다.

어떤 서비스를 만들어야 할지 명확하지 않거나 아이디어가 없을 때, 가장 좋은 시작점은 '게시판 만들기'입니다. 페이스북이나 인스타그램과 같은 대부분의 IT 서비스들은 본질적으로 게시판 구조를 기반으로 하고 있습니다. 회원제 게시판을 완성하는 과정을 통해 사용자와 데이터베이스의 상호작용, 백엔드 로직, 프론트엔드 구현 등 실무에 필요한 기본적인 서비스 구조를 효과적으로 파악할 수 있습니다.

진행자는 "만들 것이 없거나 명확하지 않다면 게시판을 만드세요 웬만한 서비스들의 프로토타입 즉 기본형은 게시판이다"라고 조언하며, 게시판 제작이 단순한 코딩 연습을 넘어 실제 서비스 구현의 핵심 원리를 익히는 데 가장 적합한 방법임을 강조했습니다.

이를 통해 개발자는 전체적인 서비스 흐름을 이해하고, 이후 더 복잡한 프로젝트로 나아갈 수 있는 탄탄한 기반을 마련할 수 있습니다.

IT 서비스를 기획하고 개발할 때는 개별 기술이나 기능에 매몰되기보다 전체 서비스 구조를 한 발 떨어져서 조망하는 시각이 중요합니다. 디자이너, 기획자, 개발자 등 모든 포지션의 관계자들이 각자의 역할에 앞서 서비스 전체 그림을 이해해야 효율적인 협업과 개발이 가능합니다. 기술 습득에만 집중하기 전에 서비스가 어떻게 운영되고 사용되는지를 파악하면, 개발 과정의 시행착오를 줄이고 결과물의 완성도를 높일 수 있습니다.

특히 AI 시대에는 파편화된 기술 지식보다 전체적인 시스템과 서비스의 구조를 이해하는 능력이 더욱 핵심적인 역량으로 부상하고 있습니다. 투더제이는 "IT 서비스를 만들겠다면 한 발 떨어져서 전체를 보는 눈을 우선 가져야 한다는 것입니다."라고 강조하며, 총체적인 관점의 중요성을 역설했습니다.

이는 복잡한 시스템을 설계하고 문제 해결 능력을 향상시키는 데 필수적인 접근 방식입니다.

데이터베이스(DB)는 엑셀 스프레드시트처럼 열(컬럼)과 행(로우)으로 구성되어 데이터를 체계적으로 저장하고 관리합니다. 데이터를 조작하기 위해서는 특정한 명령어들이 사용되는데, 이를 '쿼리(Query)' 또는 '쿼리문'이라고 부릅니다. 주요 쿼리문으로는 데이터를 조회하는 SELECT, 데이터를 삽입하는 INSERT, 데이터를 수정하는 UPDATE, 그리고 데이터를 삭제하는 DELETE가 있습니다.

투더제이는 "데이터베이스 줄여서 DB라고 부릅니다. 이렇게 열과 행으로 이루어져 있고요, 거의 엑셀이죠. 데이터를 조회할 때 셀렉트, 입력할 때 인서트, 수정할 때 업데이트, 삭제할 때 딜리트 이렇게 명령어를 사용하는데 DB에서 사용하는 명령어를 쿼리 또는 쿼리문이라고 합니다."라고 설명했습니다. 쿼리를 최적화하는 'DB 튜닝'은 서비스의 응답 속도와 전체 성능을 향상시키는 데 매우 중요한 요소입니다.

프론트엔드와 백엔드를 분리하는 가장 큰 이유는 서비스의 '속도'와 '사용자 경험'을 최적화하기 위함입니다. 과거의 일체형 웹사이트는 페이지를 이동할 때마다 모든 데이터를 처음부터 다시 로딩해야 했기 때문에 대기 시간이 길어졌고, 이는 사용자 이탈률 증가로 이어졌습니다. 데이터베이스(DB) 조회에 시간이 오래 걸리는 특성상, 백엔드에서 모든 처리를 담당하면 로딩 지연이 불가피했습니다.

현대의 개발 방식은 프론트엔드에서 화면 레이아웃을 먼저 표시하고, 필요한 데이터를 백엔드에 비동기적으로 요청하여 받아오는 방식을 사용합니다. 이를 통해 사용자는 초기 화면을 빠르게 볼 수 있고, 데이터가 로딩되는 동안에도 지루함을 덜 느끼게 됩니다. 투더제이는 "왜 프론트랑 백엔드를 나눠 놨냔 말이에요. 이유는 속도 때문입니다. 사실 DB를 조회하는데 시간이 제법 걸리게 됩니다. 백엔드에서 많은 데이터를 처리하면 로딩이 필요하죠. 그래서 사이트 규모가 커질수록 이 DB의 신속성이 떨어지게 되고 사이트에 쾌적함이 줄어들게 되는 것이죠."라고 설명하며 이러한 구조 분리가 사용자 체감 대기 시간을 최소화하고 쾌적한 사용 환경을 제공하는 데 필수적임을 강조했습니다.