スマホ用ブレークポイントを考えるとき、多くの人が「スマホは何px以下にすればよいのか」「iPhone基準で390pxにするべきか」「768px以下をスマホ扱いにしてよいのか」と迷います。しかし実務では、スマホ用の幅を1つだけ決めてすべてを管理するよりも、スマホ向けのCSSを通常スタイルとして先に書き、画面が広くなったタイミングでタブレットやPC向けのCSSを追加する方が、読みやすく保守しやすい設計になります。この考え方はモバイルファーストと呼ばれ、現在のレスポンシブデザインでは非常に一般的です。

結論として、スマホは通常CSSで作り、小さいスマホだけ調整したい場合は 480px未満、大きめスマホや小型タブレットを意識する場合は 600px前後、タブレット以上として本格的に切り替えるなら 768px以上、PC向けの2カラムやサイドバー表示を始めるなら 1024px以上 を目安にすると分かりやすいです。ただし、これらは絶対的な正解ではなく、本文の読みやすさ、ボタンの押しやすさ、画像の見え方、カードの幅、ナビゲーションの折り返しなど、実際のコンテンツが自然に見えるかどうかを確認しながら調整することが重要です。

Notion은 메모, 문서, 업무 관리, 데이터베이스, 지식 관리를 하나의 공간에서 다룰 수 있는 생산성 도구로 전 세계에서 널리 사용되고 있습니다. 단순한 메모 앱이 아니라, 개인 학습 관리, 프로젝트 관리, 팀 협업, 제품 기획, 사내 문서 관리, 지식 베이스 구축까지 폭넓게 활용할 수 있다는 점이 특징입니다.

Notion이 인기를 얻은 이유는 단순히 기능이 많기 때문만은 아닙니다. 더 중요한 이유는 많은 사람들이 겪던 정보 관리 문제를 해결했다는 점입니다. 메모가 흩어지고, 사용하는 도구가 너무 많아지고, 문서를 나중에 찾기 어렵고, 팀의 지식이 시간이 지나며 사라지는 문제를 Notion은 하나의 유연한 작업 공간으로 해결했습니다. 이 글에서는 Notion이 왜 인기 있는 생산성 도구가 되었는지, 유연성, 지식 관리, 협업, 템플릿, AI 기능을 중심으로 살펴봅니다.

Tailwind CSS는 작은 유틸리티 클래스를 조합하여 사용자 인터페이스를 만드는 Utility-First CSS 프레임워크입니다. 기존 CSS 개발에서는 요소마다 클래스명을 새로 만들고, 별도의 CSS 파일에 스타일을 작성하며, HTML과 CSS 파일을 오가면서 화면을 조정하는 방식이 일반적이었습니다. 반면 Tailwind CSS에서는 HTML, JSX, 컴포넌트 템플릿 안에 직접 클래스를 작성하여 레이아웃, 여백, 색상, 글자 크기, 반응형 동작, 상태 변화 등을 빠르게 지정할 수 있습니다. 이 방식은 React, Vue, Next.js 같은 컴포넌트 기반 프론트엔드 개발과 특히 잘 맞습니다.

Claude는 긴 문맥을 이해하고, 복잡한 구조를 분석하며, 정리된 설명을 생성하는 데 강점을 가진 AI 어시스턴트입니다. 프론트엔드 개발에서 Claude는 단순히 코드를 생성하는 도구로만 사용할 수 있는 것이 아니라, UI 전체 구조를 검토하고, 설계상의 문제를 발견하며, 개선 방향을 정리하고, 특정 구현이 왜 유지보수에 유리한지 또는 불리한지를 설명하는 용도로도 활용할 수 있습니다. 특히 Tailwind CSS처럼 여러 유틸리티 클래스를 조합해 UI를 만드는 개발 방식에서는 코드의 가독성, 설계의 일관성, 컴포넌트 구조, 반응형 대응, 접근성까지 함께 점검하는 과정이 중요해집니다.

Tailwind CSS는 “유틸리티 퍼스트”라는 사고방식을 기반으로 하는 CSS 프레임워크입니다. 기존 CSS 개발에서는 버튼, 카드, 헤더, 폼, 내비게이션, 레이아웃과 같은 UI 요소마다 클래스명을 만들고, 별도의 CSS 파일에서 해당 클래스에 스타일을 정의하는 방식이 일반적이었습니다. 반면 Tailwind CSS는 배경색, 글자색, 여백, 표시 방식, 정렬, 너비, 높이, hover 상태, focus 상태, 반응형 동작 등을 나타내는 작은 유틸리티 클래스를 제공하며, 이를 HTML, JSX, 컴포넌트 템플릿 안에 직접 작성하여 UI를 구성합니다. 이 방식 덕분에 개발자는 마크업 파일과 CSS 파일을 반복해서 오가지 않고, 화면을 보면서 빠르게 인터페이스를 만들 수 있습니다.

애자일 개발에서는 처음부터 모든 요구사항을 상세한 명세서로 고정하지 않습니다. 대신 사용자가 실제로 얻는 가치 단위로 요구사항을 정리하고, 제품 개발 과정에서 우선순위와 세부 내용을 계속 조정합니다. 시장 환경, 비즈니스 목표, 사용자 요구는 계속 변하기 때문에 개발팀은 변화에 유연하게 대응할 수 있는 요구사항 관리 방식이 필요합니다. 이때 핵심적인 역할을 하는 것이 사용자 스토리입니다.

사용자 스토리는 기능을 기술적인 명세로 설명하는 것이 아니라, “누가, 무엇을 하고 싶고, 왜 그것이 필요한가”라는 사용자 관점에서 표현하는 방법입니다. 이를 통해 개발팀은 단순히 기능을 만드는 것이 아니라, 사용자에게 어떤 가치를 전달하는지 의식하면서 개발을 진행할 수 있습니다. 특히 스크럼 개발에서는 사용자 스토리가 프로덕트 백로그 항목으로 자주 사용되며, 스프린트 계획, 수용 조건, 수용 테스트와도 깊게 연결됩니다.

기업 시스템, SaaS, 클라우드 서비스, 업무 애플리케이션, API 기반 시스템에서는 사용자별로 접근 가능한 기능과 데이터를 적절하게 제어하는 구조가 반드시 필요합니다. 모든 사용자가 동일한 권한으로 시스템을 이용할 수 있도록 설계하면 일반 사용자가 관리자 기능을 실행하거나, 다른 부서 또는 다른 테넌트의 데이터에 접근하는 심각한 보안 문제가 발생할 수 있습니다. 따라서 시스템 개발에서는 “누가”, “어떤 리소스에”, “어떤 작업을 수행할 수 있는가”를 판단하는 인가 설계가 매우 중요합니다.

이러한 접근 제어를 구현하는 대표적인 모델이 RBAC(Role-Based Access Control, 역할 기반 접근 제어)와 ABAC(Attribute-Based Access Control, 속성 기반 접근 제어)입니다. RBAC는 사용자에게 직접 권한을 부여하는 대신 역할에 권한을 설정하고, 그 역할을 사용자에게 할당하는 방식입니다. 반면 ABAC는 사용자, 리소스, 환경, 작업 내용 등 다양한 속성을 평가하여 접근 허용 여부를 결정하는 방식입니다.