본문 바로가기

분류 전체보기

 (115)
[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, 차량 인포테인먼트까지 사용자가 접속하는 디바이스 환경은 갈수록 다양해지고 있습니다.이제 서비스는 단순히 “웹”만 고려할 수 없고, 네이티브 앱, 모바일 웹, 웹 앱(PWA 포함), 하이브리드 앱(WebView 기반) 같은 다양한 구현 선택지 중에서 전략적으로 결정해야 하는 상황이 되었습니다. 이번 글에서는 하드웨어 다양성 확대라는 배경 속에서 등장한 주요 구현 방식들을 비교하고, 각각의 장단점과 선택 기준을 정리해보겠습니다.✅ 1. 📱 네이티브 앱 (Native App)🧩 정의스마트폰 시대에 가장 먼저 자리잡은 형태.iOS/Android 운영체제에 맞춰 앱스토어에서 설치되는 앱입니다.Swift, Kotlin, Java 등 플랫폼 전용 언어..
[HTML/CSS 실무 팁] input 의사 클래스(pseudo-class) 🧠 정리상태설명 요약:hover마우스 올라갔을 때:focus포커스 받은 입력 (커서가 진입한 상태, 입력이 가능한 상태):active누르는 순간:visited방문한 링크:enabled / :disabled사용 가능/불가:checked체크됨 (radio, checkbox의 경우 사용) 토글 !== 라디오토글은 checkbox를 css로 변환하여 사용
[Git] git add -A vs git add (디렉토리 구조 변환 중) git add -A .현재 디렉토리 기준 전체 변경 사항을 정확하게 반영해서 스테이지에 올리는 명령. 삭제된 파일까지 함께 처리되기 때문에 커밋 상태를 깔끔하게 동기화할 수 있는 게 장점.🔍 비교: git add -A . vs git add .명령어설명삭제 파일 포함 여부git add .변경/추가된 파일만 스테이징❌ 삭제 파일 반영 안 됨git add -A .변경/추가/삭제된 모든 파일을 스테이징✅ 삭제 파일 반영됨 ✅ 깔끔한 커밋 상태 유지란?디렉토리 구조 리팩토링(FSD 구조 정리, 폴더 이동 등)을 할 경우,파일이 삭제 + 새로 생성되는 것처럼 처리되기 때문에, 삭제된 파일도 스테이지에 올려야 진짜 구조 변경이 정확하게 커밋됩니다.예시:# 변경 전src/components/Header.js# 변경..
[Git] 작업 도중, 실수로 이전 커밋 관련한 작업물을 올리지 못했을 때 git add git commit --amend git show --only-name: 이전 커밋의 파일명 확인 가능. 실수로 이미 push를 해버렸다면?.git add git commit --amend git push --force-with-lease origin force없이 push 하려고 한다면?🔍 오류 핵심 요약non-fast-forward 오류는 로컬의 커밋 해시가 원격의 HEAD와 달라졌는데,--force 없이 push 하려고 해서 Git이 거부한 것 amend를 하면 커밋 메시지가 변경되지 않아도 해시는 변경되기에, PR에 올라간 마지막 commit(HEAD)와 로컬의 amend한 커밋은 다름.➡️ 그래서 amend는 이전 커밋을 새 커밋으로 "덮어쓴 것처럼 보이지만 실제로는 완전..

티스토리툴바