30장. 모바일에서도 잘 보이게 만들기

2026-04-24Views 9약 10분생성형 AI 활용

30장. 모바일에서도 잘 보이게 만들기

[5부] 모바일에서도 잘 보이게 만들기

예쁜 화면은 넓은 화면에서만 예쁘면 반쪽짜리다

지난 장에서 우리는 화면의 간격을 정리하고, 버튼 상태를 나누고, 읽기 쉬운 UI로 다듬는 연습을 했다. 데스크톱 화면에서는 꽤 그럴듯해 보였을 것이다. 그런데 막상 휴대폰으로 열어 보면 갑자기 분위기가 달라진다. 제목이 너무 크고, 카드가 답답하고, 버튼은 손가락으로 누르기 어려우며, 검색창과 정렬 메뉴는 서로 자리를 밀어내며 싸우기 시작한다.

이때 많은 초보자가 이렇게 생각한다.

"나중에 시간 남으면 모바일도 고치자."

하지만 실제 사용자에게는 그 나중이 오지 않는 경우가 많다. 누군가는 처음부터 휴대폰으로 당신의 서비스를 본다. 그 첫인상이 불편하면, 기능이 좋아도 오래 머물지 않는다.

그래서 모바일 대응은 옵션이 아니라 완성도의 일부다. 특히 첫 서비스일수록 그렇다. 작은 화면에서도 읽기 쉽고 누르기 쉬우면, 사용자는 서비스가 훨씬 더 믿음직하다고 느낀다.

이번 장에서는 반응형 레이아웃을 적용해 작은 화면에서도 자연스럽게 작동하는 UI를 만드는 방법을 살펴본다. 어렵게 느껴질 수 있지만, 핵심은 의외로 단순하다. 좁은 화면에서 무엇이 먼저 보여야 하는지, 무엇이 더 쉽게 눌려야 하는지를 정리하는 것이다.

반응형은 화면을 줄이는 기술이 아니라, 다시 배치하는 기술이다

초보자가 반응형을 떠올릴 때 가장 먼저 하는 상상은 이것이다.

"큰 화면을 그냥 작게 줄이면 되는 것 아닌가?"

아쉽게도 그렇게는 잘 되지 않는다. 화면이 좁아지면 단순히 크기만 줄어드는 것이 아니라, 정보의 우선순위가 달라진다. 데스크톱에서는 한 줄에 나란히 놓을 수 있던 것들이 모바일에서는 위아래로 쌓이는 편이 더 자연스럽다. 좌우에 넉넉하게 두었던 여백도 줄여야 하고, 버튼은 더 크게 눌리게 만들어야 한다.

즉, 반응형은 축소가 아니라 재배치다.

예를 들어 데스크톱에서는 이런 구성이 괜찮을 수 있다.

<div className="flex items-center justify-between gap-4">
  <input className="w-80" />
  <select className="w-40" />
</div>

하지만 모바일에서는 이 한 줄 구성이 금방 답답해진다. 그래서 보통 이렇게 바꾼다.

<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
  <input className="w-full sm:w-80" />
  <select className="w-full sm:w-40" />
</div>

여기서 처음 보는 sm: 같은 표시는 화면이 어느 정도 넓어졌을 때 적용할 스타일이라고 이해하면 된다. 즉, 기본은 모바일 기준으로 작성하고, 화면이 넓어지면 그때 가로 배치를 다시 켜는 방식이다.

이 감각이 중요하다. 기본값은 작은 화면, 확장은 큰 화면이라고 생각하면 반응형이 훨씬 쉬워진다.

모바일에서는 먼저 '한눈에 이해되는가'를 보자

데스크톱에서는 화면이 넓기 때문에 정보가 조금 흩어져 있어도 그럭저럭 버틴다. 하지만 모바일에서는 그런 여유가 없다. 한 화면에 보이는 양이 적기 때문에 구조가 헷갈리면 바로 피곤해진다.

작은 화면에서는 특히 다음 세 가지를 먼저 확인해야 한다.

지금 이 화면이 무엇을 위한 화면인지 바로 보이는가
지금 가장 중요한 행동이 무엇인지 눈에 들어오는가
손가락으로 눌러야 하는 요소가 충분히 크고 간격이 있는가

예를 들어 글 목록 화면이라면, 사용자가 제일 먼저 봐야 할 것은 대개 화면 제목, 검색이나 필터, 그리고 글 카드 자체다. 반면 장식용 설명이나 너무 긴 소개 문구는 모바일에서는 오히려 집중을 방해할 수 있다.

그래서 모바일에서는 "있으면 좋은 정보"보다 "지금 필요한 정보"를 앞에 두는 편이 좋다. 서비스 소개 문장이 길다면 줄이고, 부가 설명이 많다면 접거나 뒤로 빼는 것이 낫다.

작은 화면부터 만드는 습관이 훨씬 편하다

반응형 작업을 쉽게 하는 가장 좋은 방법은 처음부터 모바일을 기준으로 생각하는 것이다. 이를 흔히 모바일 퍼스트라고 부른다. 말이 어려워 보여도 뜻은 간단하다. 가장 작은 화면에서 먼저 자연스럽게 만든 뒤, 넓은 화면에서 확장한다는 뜻이다.

이 방식이 좋은 이유는 분명하다. 작은 화면에서는 꼭 필요한 요소만 남겨야 하므로 구조가 더 선명해진다. 반대로 큰 화면부터 만들면 이것저것 넉넉하게 넣다가, 나중에 모바일에서 억지로 접고 줄이느라 더 복잡해지기 쉽다.

예를 들어 페이지 바깥 레이아웃도 이렇게 시작할 수 있다.

<main className="mx-auto max-w-3xl px-4 py-6 sm:px-6 sm:py-8">
  <section className="space-y-2">
    <h1 className="text-2xl font-bold sm:text-3xl">글 목록</h1>
    <p className="text-sm text-gray-600 sm:text-base">
      원하는 글을 편하게 찾고 읽어 보세요.
    </p>
  </section>
</main>

이 코드는 아주 단순하지만 중요한 원칙을 담고 있다. 모바일에서는 여백을 너무 크게 잡지 않고, 제목 크기도 조금 절제한다. 화면이 넓어질 때만 여백과 글자 크기를 늘린다. 이렇게 하면 작은 화면에서도 답답하지 않고, 큰 화면에서도 허전하지 않다.

폭을 고정하지 말고, 흐르게 만들자

초보자 프로젝트에서 자주 생기는 문제 중 하나는 요소의 폭을 지나치게 고정하는 것이다. w-[600px], w-96 같은 값을 아무 생각 없이 넣다 보면 데스크톱에서는 괜찮아 보여도 모바일에서는 바로 삐져나온다.

모바일 대응을 쉽게 하려면 고정 폭보다 w-full, max-w-*, mx-auto 같은 흐르는 레이아웃을 더 자주 쓰는 편이 좋다. 쉽게 말해 "가능하면 공간을 채우되, 너무 넓어지지는 않게" 만드는 방식이다.

예를 들어 작성 폼을 감싸는 박스는 이렇게 만들 수 있다.

<section className="mx-auto w-full max-w-2xl rounded-2xl border bg-white p-4 shadow-sm sm:p-6">
  <h2 className="text-xl font-semibold">새 글 작성</h2>
</section>

이 구조의 장점은 모바일에서는 화면 너비에 맞춰 자연스럽게 줄어들고, 데스크톱에서는 너무 길쭉해지지 않는다는 점이다. 긴 줄은 읽기 어렵고, 지나치게 넓은 입력창은 시선이 흔들린다. 그래서 max-w는 작은 서비스에서도 꽤 중요한 친구다.

한 줄에 우겨 넣지 말고, 위아래로 쌓을 줄 알아야 한다

데스크톱에서 보기 좋은 구성 중 상당수는 모바일에서 그대로 유지할 필요가 없다. 특히 검색창, 정렬 메뉴, 필터 버튼, 글쓰기 버튼처럼 도구 역할을 하는 요소는 모바일에서 위아래로 쌓는 편이 훨씬 편한 경우가 많다.

예를 들어 글 목록 상단의 도구 영역은 이렇게 만들 수 있다.

<div className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
  <input
    type="text"
    placeholder="제목으로 검색해 보세요"
    className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm"
  />

  <div className="flex flex-col gap-3 sm:flex-row">
    <select className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm sm:w-44">
      <option>최신순</option>
      <option>오래된순</option>
    </select>

    <button className="w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-medium text-white sm:w-auto">
      글 작성하기
    </button>
  </div>
</div>

모바일에서는 검색창이 먼저 나오고, 그 아래에 정렬과 버튼이 쌓인다. 이렇게 하면 사용자는 한 줄에 낑겨 있는 조작 요소보다 훨씬 편하게 읽고 누를 수 있다. 데스크톱에서는 다시 가로로 펼쳐서 공간을 효율적으로 쓸 수 있다.

중요한 것은 "가로 정렬이 더 고급스러워 보인다" 같은 생각에 매달리지 않는 것이다. 사용자는 고급스러운 정렬보다 편한 정렬을 더 좋아한다.

버튼은 작고 세련된 것보다 크고 친절한 것이 낫다

모바일에서는 마우스 커서가 아니라 손가락으로 누른다. 이 차이는 생각보다 크다. 데스크톱에서 괜찮던 작은 버튼이 모바일에서는 순식간에 시험장이 된다. 분명 저장을 누르고 싶었는데 취소를 눌러 버리는 일이 생기기 때문이다.

그래서 모바일에서 버튼은 다음 두 가지를 특히 신경 써야 한다.

첫째, 충분히 큰가.

둘째, 버튼끼리 너무 붙어 있지 않은가.

예를 들어 수정과 삭제 버튼을 한 줄에 너무 빽빽하게 붙이는 것은 피하는 편이 좋다. 특히 삭제는 실수로 누르면 되돌리기 어렵기 때문에 더 조심해야 한다.

이런 식이 더 안전하다.

<div className="flex flex-col gap-3 sm:flex-row">
  <button className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm font-medium text-gray-800 sm:w-auto">
    수정하기
  </button>
  <button className="w-full rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700 sm:w-auto">
    삭제하기
  </button>
</div>

모바일에서는 버튼이 넓게 깔리기 때문에 누르기 편하고, 데스크톱에서는 필요하면 다시 나란히 둘 수 있다. 작은 화면에서는 w-full이 주는 안정감이 꽤 크다.

글자는 줄이는 것보다 읽히게 만드는 것이 중요하다

모바일 화면이 좁다고 해서 글자를 무조건 작게 만들면 오히려 읽기 어려워진다. 특히 설명 문구나 카드 본문을 너무 작게 만들면 사용자는 화면을 확대하고 싶어진다.

반응형에서 중요한 것은 단순한 축소가 아니라 읽는 리듬이다. 제목은 여전히 제목답게 보여야 하고, 본문은 편하게 읽혀야 하며, 보조 정보는 튀지 않아야 한다.

예를 들어 카드 안 텍스트는 이런 식으로 잡을 수 있다.

<article className="rounded-2xl border bg-white p-4 shadow-sm sm:p-5">
  <p className="text-xs text-gray-500">김민지 · 2026.04.23</p>
  <h2 className="mt-2 text-lg font-semibold text-gray-900 sm:text-xl">
    모바일에서도 편한 글 목록 만들기
  </h2>
  <p className="mt-3 text-sm leading-6 text-gray-700">
    작은 화면에서도 검색하고 읽고 이동하기 쉬운 목록 화면을 만드는 핵심을 정리합니다.
  </p>
</article>

여기서 모바일 제목을 아예 작게 죽여 버리지 않고, text-lg 정도로 유지한 점이 중요하다. 반대로 데스크톱에서는 sm:text-xl로 조금 더 키워도 된다. 이렇게 하면 작은 화면에서도 힘이 빠지지 않는다.

또한 줄 간격도 중요하다. 화면이 좁을수록 글줄이 답답하게 붙어 있으면 금방 읽기 싫어진다. leading-6처럼 적당한 줄 간격은 보기보다 큰 차이를 만든다.

카드와 목록은 '길이 관리'가 필요하다

모바일에서 카드 UI가 무너지는 가장 흔한 이유는 내용이 너무 길어지는 것이다. 제목이 세 줄, 요약이 다섯 줄, 태그가 세 줄이 되면 카드 하나가 지나치게 커지고, 목록 전체를 훑기가 어려워진다.

이럴 때는 정보를 줄이는 것이 중요하다. 모든 것을 보여 주는 것이 친절이 아니라, 지금 필요한 만큼만 보여 주는 것이 더 친절할 때가 많다.

예를 들어 목록 카드에서는 이런 기준이 유용하다.

제목은 두 줄 안쪽으로
요약은 두세 줄 정도로
날짜, 작성자 같은 보조 정보는 짧게
태그나 추가 정보는 정말 필요할 때만

Tailwind를 쓰고 있다면 긴 텍스트를 깔끔하게 잘라 줄 수도 있다.

<h2 className="line-clamp-2 text-lg font-semibold text-gray-900 sm:text-xl">
  AI와 함께 처음부터 끝까지 만드는 작은 풀스택 서비스 회고
</h2>

<p className="mt-3 line-clamp-3 text-sm leading-6 text-gray-700">
  이번 글에서는 기획부터 화면 구성, 데이터 연결, 배포까지 경험하며 배운 점을 정리합니다.
</p>

이렇게 하면 목록 높이가 너무 들쭉날쭉해지지 않아 모바일에서 훑어보기 좋다.

입력 폼은 모바일에서 특히 더 친절해야 한다

폼은 모바일에서 불편함이 더 잘 드러나는 영역이다. 입력창이 작으면 누르기 어렵고, 라벨이 모호하면 금방 헷갈리며, 에러 메시지가 멀리 떨어져 있으면 무엇을 고쳐야 하는지 알기 힘들다.

모바일 폼에서는 다음 원칙이 특히 중요하다.

입력창은 넓게
라벨은 입력창 가까이에
관련 없는 요소는 한 줄에 억지로 넣지 않기
저장 버튼은 눈에 잘 보이게 두기

예를 들어 작성 폼은 이렇게 구성할 수 있다.

<form className="space-y-5">
  <div className="space-y-2">
    <label htmlFor="title" className="text-sm font-medium text-gray-800">
      제목
    </label>
    <input
      id="title"
      className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm"
      placeholder="제목을 입력하세요"
    />
  </div>

  <div className="space-y-2">
    <label htmlFor="content" className="text-sm font-medium text-gray-800">
      내용
    </label>
    <textarea
      id="content"
      rows={8}
      className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm"
      placeholder="내용을 입력하세요"
    />
  </div>

  <button className="w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-medium text-white sm:w-auto">
    저장하기
  </button>
</form>

모바일에서는 저장 버튼을 전체 너비로 두는 것이 꽤 괜찮다. 지금 해야 할 행동이 무엇인지 분명해지고, 누르기도 쉬워지기 때문이다.

여백은 줄이되, 답답해지지 않게 조절하자

모바일 화면이 작다고 해서 모든 여백을 줄여 버리면 화면이 오히려 더 답답해진다. 반대로 여백이 너무 크면 스크롤이 길어지고 핵심 정보가 늦게 나온다. 결국 적당함이 필요하다.

실전에서는 이런 감각으로 접근하면 편하다.

제목과 설명처럼 서로 관련 있는 요소는 가깝게 둔다. 다른 성격의 덩어리끼리는 조금 더 벌린다. 카드 안쪽 여백은 너무 작지 않게 유지한다. 바깥 여백은 모바일에서 조금 줄이고, 화면이 넓어질수록 다시 늘린다.

예를 들어 페이지 전체 여백을 이렇게 다루면 무난하다.

<main className="mx-auto max-w-3xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8">

이 한 줄만으로도 모바일, 태블릿, 데스크톱의 인상이 꽤 달라진다. 모바일에서는 공간을 아끼고, 큰 화면에서는 숨통을 틔운다.

그리드는 욕심내지 말고 한 칸부터 시작하자

초보자가 반응형을 만들 때 멋져 보이는 그리드 레이아웃에 마음을 빼앗기기 쉽다. 하지만 작은 서비스에서는 복잡한 다단 레이아웃보다 한 칸 구조가 훨씬 안정적일 때가 많다.

예를 들어 카드 목록은 모바일에서 한 줄씩 쌓고, 넓어지면 두 칸 정도로 늘리는 것이 자연스럽다.

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
  {posts.map((post) => (
    <PostCard key={post.id} post={post} />
  ))}
</div>

이 구조는 이해하기도 쉽고, 관리하기도 쉽다. 처음부터 grid-cols-3, grid-cols-4 같은 욕심을 내기보다, 모바일 한 칸에서 시작해 필요한 만큼만 확장하는 편이 좋다.

특히 글 목록 서비스에서는 너무 많은 카드를 한 화면에 욱여넣기보다, 한 카드씩 편하게 읽히는 쪽이 더 좋다.

헤더와 메뉴는 모바일에서 더 단순해야 한다

데스크톱에서는 로고, 메뉴, 사용자 이름, 버튼 등을 한 줄에 자연스럽게 넣을 수 있다. 하지만 모바일에서는 이 한 줄이 쉽게 무너진다. 그래서 모바일 헤더는 더 단순한 구성이 필요하다.

예를 들어 초보자 프로젝트에서는 이런 방향이 현실적이다.

로고 또는 서비스 이름은 간단하게
꼭 필요한 메뉴만 남기기
버튼이 많다면 숨기거나 아래 영역으로 보내기
사용자 정보는 너무 길게 노출하지 않기

작은 화면의 상단은 생각보다 비싼 공간이다. 많은 것을 보여 주는 것보다, 지금 꼭 필요한 것만 보여 주는 편이 좋다.

모달과 고정 버튼은 편리하지만 조심해서 써야 한다

모바일에서는 화면 아래쪽에 고정된 버튼이나 전체 화면 모달이 꽤 편리할 수 있다. 하지만 잘못 쓰면 오히려 답답함이 커진다.

예를 들어 하단 고정 버튼은 주요 행동을 잘 드러내지만, 화면 내용을 가리면 불편하다. 모달도 집중을 높여 주지만, 안의 내용이 길면 작은 화면에서 스크롤 지옥이 되기 쉽다.

그래서 입문 단계에서는 먼저 기본 페이지 흐름을 잘 만드는 쪽이 더 안전하다. 꼭 필요한 경우에만 고정 요소를 추가하고, 실제 휴대폰 크기에서 가려지는 부분이 없는지 확인하는 것이 좋다.

반응형은 눈으로만 보지 말고 직접 눌러 봐야 한다

모바일 대응에서 흔한 착각이 하나 있다. 브라우저 창을 좁혀 보고 "음, 대충 괜찮네"라고 판단하는 것이다. 하지만 실제 사용성은 눌러 보기 전에는 잘 드러나지 않는다.

작은 화면에서는 꼭 이런 부분을 직접 확인해 봐야 한다.

버튼이 정말 누르기 쉬운가
입력창을 눌렀을 때 답답하지 않은가
텍스트가 너무 길어 튀어나오지 않는가
헤더나 카드가 깨지지 않는가
검색창과 정렬 메뉴가 서로 밀어내지 않는가
빈 화면과 에러 화면도 읽기 쉬운가

브라우저 개발자 도구의 모바일 보기 기능을 써도 좋고, 가능하면 실제 스마트폰으로 접속해 보는 것이 가장 좋다. 실제 기기에서는 손가락으로 누르는 느낌, 글자 크기, 스크롤 길이가 훨씬 현실적으로 보인다.

초보자가 자주 하는 모바일 실수

모바일 대응을 할 때 초보자가 특히 자주 만나는 실수가 있다.

첫째, 화면 폭보다 넓은 요소를 만드는 것이다. 긴 코드 블록, 고정 폭 카드, 지나치게 큰 이미지가 대표적이다.

둘째, 데스크톱용 작은 버튼을 그대로 가져오는 것이다. 보기엔 단정해도 실제로는 누르기 어렵다.

셋째, 한 줄 배치에 너무 집착하는 것이다. 검색창, 필터, 버튼, 설명을 모두 한 줄에 넣으려 하면 결국 아무도 편하지 않다.

넷째, 텍스트를 지나치게 줄이는 것이다. 작은 화면이라고 해서 본문까지 작게 만들면 읽는 피로가 커진다.

다섯째, 모바일에서는 보이지 않는 상태를 놓치는 것이다. 예를 들어 로딩 중 문구나 에러 메시지가 버튼 아래에 너무 작게 들어가면 사용자가 알아차리지 못할 수 있다.

실수를 피하는 가장 좋은 방법은 멋있어 보이는 구성보다, 손쉽게 읽고 누를 수 있는 구성을 먼저 고르는 것이다.

AI에게 반응형 수정을 맡길 때는 이렇게 말하자

모바일 대응 역시 Claude Code나 Codex에게 꽤 잘 맡길 수 있다. 다만 이때도 "모바일에서도 잘 보이게 해줘" 정도로만 말하면 AI가 너무 크게 구조를 바꾸거나, 불필요한 애니메이션을 넣거나, 지금 단계에 맞지 않는 복잡한 코드를 추가할 수 있다.

그래서 요청은 구체적일수록 좋다. 예를 들면 이렇게 말할 수 있다.

Next.js와 Tailwind 기준으로 글 목록 화면을 반응형으로 수정해줘.
기능은 바꾸지 말고 모바일 사용성을 개선하는 것이 목표야.
모바일에서는 검색창, 정렬 메뉴, 글쓰기 버튼이 위아래로 쌓이게 해줘.
카드 간격과 페이지 여백을 작은 화면에 맞게 조정해줘.
버튼은 모바일에서 누르기 쉽게 충분한 높이와 너비를 가져야 해.
제목과 본문 텍스트는 너무 작아지지 않게 해줘.
고정 폭은 피하고 w-full, max-w 중심으로 정리해줘.
변경 이유를 코드와 함께 짧게 설명해줘.

이 요청의 장점은 분명하다. AI가 무엇을 우선해야 하는지 안다. 기능 추가가 아니라 사용성 개선이라는 점, 모바일에서 쌓아야 할 요소가 무엇인지, 폭과 버튼을 어떻게 다뤄야 하는지가 모두 들어 있기 때문이다.

결과를 받았다면 바로 끝내지 말고 꼭 확인하자. 특히 이런 질문이 좋다.

이 화면을 한 손으로 쓸 때 불편하지 않은가?

지금 가장 중요한 버튼이 분명히 보이는가?

검색하고, 읽고, 이동하는 흐름이 좁은 화면에서도 자연스러운가?

AI는 빠르게 수정해 주지만, 실제로 편한지 판단하는 일은 결국 사용자의 손과 눈으로 해야 한다.

모바일까지 챙기는 순간 서비스가 달라 보인다

초보자 프로젝트는 종종 이런 평가를 받는다.

"기능은 되는데 좀 미완성 같아."

그 미완성 느낌은 꼭 거대한 기능 부족에서만 오는 것이 아니다. 작은 화면에서 불편한 경험이 쌓여서 생기기도 한다. 반대로 모바일까지 신경 쓴 서비스는 기능 수가 많지 않아도 훨씬 단단해 보인다.

검색창이 자연스럽게 쌓이고, 버튼이 누르기 쉽고, 카드가 읽기 좋고, 폼이 답답하지 않다면 사용자는 당신의 서비스를 더 오래, 더 편하게 쓴다. 그리고 그 순간 서비스는 단순한 연습작보다 한 단계 더 실제 제품처럼 느껴진다.

마무리

이번 장에서 우리는 반응형 레이아웃의 핵심을 살펴봤다. 중요한 것은 복잡한 기술이 아니었다. 작은 화면에서 무엇이 먼저 보여야 하는지, 무엇이 쉽게 눌려야 하는지, 무엇을 과감히 덜어내야 하는지를 판단하는 감각이었다.

반응형은 큰 화면을 억지로 줄이는 작업이 아니다. 모바일에서 다시 정리하고, 큰 화면에서 다시 확장하는 작업이다. 이 순서를 이해하면 레이아웃은 훨씬 덜 복잡해지고, 서비스는 훨씬 더 친절해진다.

이제 당신의 첫 서비스는 데스크톱에서만 그럴듯한 화면이 아니라, 손안에서도 제법 괜찮은 제품이 되어 가고 있다. 그리고 이 차이는 생각보다 크다.

사용자는 종종 이렇게 느낀다.

"어? 이거 진짜 서비스 같은데?"

바로 그 감각이, 모바일까지 챙긴 화면에서 자주 시작된다.

책 목록

바이브 코딩으로 완성하는 첫 풀스택 웹 서비스

전체 목차 보기