본문 바로가기

분류 전체보기

 (101)
[프로젝트 진행] 초기 프로젝트 진행 방법 🚀 초기 프로젝트 진행 가이드 (5단계 + MVP 관점)초기 기획·개발 단계에서는 제한된 리소스 속에서 리스크를 최소화하고 빠르게 MVP를 검증하는 것이 핵심입니다.이번 글에서는 기획 → 설계 → 구현 → 검증 → 운영의 5단계 프로세스를 따라가며, 각 단계에서 취할 수 있는 노력과 서비스/기술 관점에서의 MVP 성격을 함께 정리했습니다. 1️⃣ 기획 (Planning)프로젝트 목표 수립: 왜 이 프로젝트를 하는지, 어떤 문제를 해결할 것인지 정의.요구사항 정리: MoSCoW 방식(Must/Should/Could/Won’t)으로 분류.Must = MVP 범위Should/Could = 후속 확장 기능Won’t = 이번 단계에서는 하지 않음우선순위 명확화: “모든 걸 다 하겠다”는 접근은 위험. 제한된 리..
[WEB] 웹의 구분과 발전: 목적·생성·환경 3가지 기준 비교 🚀 들어가며웹을 공부하다 보면 웹사이트, 웹서비스, 웹앱, 모바일 웹, PWA 같은 용어들이 서로 섞여 쓰이면서 혼란을 주곤 합니다.저 역시 처음에는 “모바일 웹과 웹앱은 뭐가 다른 거지?”라는 질문에서 출발했지만, 정리하다 보니 사실 이 개념들은 각기 다른 구분 기준에서 나온다는 걸 깨달았습니다. 이번 글에서는 웹 구분의 주요 기준들과 각 기준에 따른 역사적 흐름을 정리하여, 개념이 어떻게 발전하고 얽혀왔는지를 설명합니다.📌 웹을 나누는 주요 기준들웹을 구분하는 기준은 크게 세 가지 축으로 나눌 수 있습니다.목적 기준: 정보 전달 vs 기능 제공웹사이트 → 웹서비스(과도기) → 웹앱 (+PWA는 웹앱의 진화형)본질적으로 “무엇을 하려고 만들어졌는가?”에 초점을 맞춤. 콘텐츠 생성·배포 방식 기준: ..
[PetFit] 젝트 활동 1차 리뷰 📌 도입3개월간 진행했던 젝트(JECT) 프로젝트를 돌아보며, 기술적인 문제 해결부터 협업 과정에서의 의사결정, 그리고 회고를 통해 성장한 부분까지 정리해보았습니다.특히 카카오 로그인 버그를 해결했던 경험, MVP 기능을 정의하고 우선순위를 조정했던 과정, 리뷰위크를 고려한 개발 전략, 그리고 ADR을 활용해 의사결정 방식을 개선했던 경험이 이번 글의 중심 내용입니다.📌 기간 내 활동 중 마주한 문제 상황과 해결 과정 (기술, 협업 등)프로젝트 진행 과정에서 카카오 로그인 버그라는 중요한 문제를 마주했습니다. 원인은 리디렉션 URI의 정의를 잘못했기 때문이었는데, 인증 과정에서 예상하지 못한 흐름이 발생하면서 로그인 플로우가 정상적으로 동작하지 않았습니다. 처음에는 단순히 API 호출의 문제라고 생각..
[프로젝트 진행:PetFit] POC, MVP / 폭포수, 애자일 / 세부 기능 분리 및 일정 관리, 스프린트 ✅ 와이어프레임의 본질적 역할→ 와이어프레임은 기획자가 자신의 기획을 이해시키는 용도이고,→ 핵심은 화면 흐름(네비게이션), 기능 배치(구조), 데이터 입력/출력 유무 등이 들어가는게 본질입니다.그래서 일반적인 와이어프레임 구성 요소는:화면 흐름(페이지 전환 구조)각 화면의 정보 구성 (뭘 보여줄지)인터랙션 포인트 (어디 클릭, 어디 이동)입력/출력 데이터 존재 여부스타일 요소는 없음 (폰트, 컬러 등)왜 “lo-fi 와이어프레임”이라는 말을 써도 되는가?기획자 → 초안 수준으로 흐름을 빠르게 그릴 때→ “lo-fi 와이어프레임”이라고 부르기도 함 (흐름용, 내부 협업용)디자이너 전달 전 정교하게 다듬을 때→ “mid-fi 와이어프레임”으로 넘어가는 경우 많음 (디자인 시안 바로 전 단계)✅ 현실적인 절..
[Web] 반응형 웹, 모바일 웹, 모바일 앱, 웹뷰, PWA 정의 세미 반응형 == 부분 반응형 == 타겟 디바이스 최적화 반응형=> 모바일 퍼스트 반응형결론: 레이아웃이 ‘유동적’ 범위 안에서 변화하므로 반응형 웹으로 간주함단, 넓은 화면에서 별도 대응을 하지 않는다면 “모바일 중심 반응형” 또는 “세미 반응형” 정도로 표현할 수 있음✅ 왜 이렇게 설계하나?모바일 사용자 비중이 절대적일 때 (예: MZ 타겟 서비스)콘텐츠 가독성과 터치 UX를 일정 너비 내에서 유지하고자 할 때개발 비용 절감: 데스크탑 대응보다 모바일 최적화에 집중 세미 반응형 == 부분 반응형 == 타겟 디바이스 최적화 반응형=> 데스크탑 퍼스트 반응형 ✅ 용어 정리 실무 관점용어설명실무 판단 기준풀 반응형모바일부터 데스크탑까지 모든 해상도 대응미디어쿼리로 디테일하게 대응모바일 퍼스트 반응형모바일..
[Web] 부분 적응형 구조, 반응형 안의 UI 전환 분기 토스유동배치 반응형( breakpoint 639px 기준 ) 네이버플러스 스토어유동배치 반응형 ( breakpoint 768px, 1151px 기준 ) 반응형 디자인은 가로 너비(Breakpoint)에 따라 구조가 유동적으로 바뀌는 것이 원칙이며,콘텐츠 구조 자체가 변경되는 경우도 디자이너가 의도적으로 설계하는 전략입니다.✅ 질문 핵심 요약“콘텐츠가 단순히 flex로 줄서기만 하는 게 아니라, 구조 자체가 바뀌는 경우도 있는가?”→ 예. 바뀌는 게 맞고, 그것도 ‘반응형’ 안에 포함되는 범위입니다.📌 1. 단순 유동형 vs 구조 분기형항목flex 유동 배치구조 분기 (디자인 구조 변경)설명기존 UI를 줄이거나 쌓음모바일에서는 다른 레이아웃으로 전환예시카드 3개 → 1개씩 세로 나열탭 → 드로어, 리스..
[Web] 웹뷰, 웹앱, 모바일앱, 모바일웹 비교 하드웨어 다양성 확대스마트폰, 태블릿, 데스크톱, 스마트워치, TV, 차량 인포테인먼트 등 접점 다변화웹은 특정 디바이스에 국한되지 않고, Cross-Device 경험을 전제로 서비스해야 하는 시대✅ 1. 📱 모바일 앱 (Native App)🧩 정의iOS(Android) 운영체제에 맞춰 앱스토어에서 설치되는 앱입니다.Swift, Kotlin, Java 등 플랫폼 전용 언어로 제작됨.🔍 특징운영체제와 깊게 연동 (카메라, 알림, 센서 등)빠르고 부드러운 UX오프라인 사용 가능💡 예시카카오톡, 인스타그램, 네이버 앱👍 장점성능이 좋고 빠름디바이스 기능을 자유롭게 사용 가능앱스토어 배포로 접근성이 좋음👎 단점iOS/Android 따로 개발 필요 (비용 ↑)유지보수 복잡배포에 시간 소요 (심사 필요)..
[HTML/CSS 실무 팁] input 의사 클래스(pseudo-class) 🧠 정리상태설명 요약:hover마우스 올라갔을 때:focus포커스 받은 입력 (커서가 진입한 상태, 입력이 가능한 상태):active누르는 순간:visited방문한 링크:enabled / :disabled사용 가능/불가:checked체크됨 (radio, checkbox의 경우 사용) 토글 !== 라디오토글은 checkbox를 css로 변환하여 사용

티스토리툴바