1. 학습하기
-
제대로 알고 쓰자! - Card와 Panel1. 학습하기 2025. 4. 5. 23:30
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다. Card와 Panel 이 비슷한 컴포넌트냐고 할 수도 있지만 대충 네모 형태에 다른 요소들이 들어가 있는 모양이라 착각할 수 있을 것 같다는 생각에 선정했다.두 요소의 목적과 구성 요소만 안다면 차이가 굉장히 명확하기 때문에 한 번 정리해두면 더 이상 헷갈리지는 않을 것 같다. 다음과 같은 구성으로 진행된다.CardPa..
-
[서비스 기획] 백오피스 기획을 위한 프론트 화면 분석1. 학습하기 2024. 12. 18. 23:00
더보기다음 글에서 이어집니다.[1. 학습하기] - [서비스 기획] 백오피스(Back Office)란[1. 학습하기] - [서비스 기획] 백오피스 도메인 공부하기1. 피그마로 화면 와이어프레임을 구성했다.랜딩페이지를 타겟으로 삼아 GNB부터 각 파트별 레이아웃의 배치를 설정했다.오토레이아웃과 실제 사이즈를 고려하여 배치했고, 이미지 등은 회색 프레임으로 처리했다.(와이어프레임과 화면 디자인 사이 그 어딘가의 결과물이 되었다)이 과정까지는 몇 번 해본 적이 있어서 최대한 빠른 시간 내에 완성하는 것을 작은 미션으로 삼았다. 30분 안에 끝내기! 프론트 화면을 먼저 살펴보는 이유는1. 삼성 라이온즈 홈페이지에서 제공하는 전체 기능 파악2. 관리자의 입장에서 요구사항 도출로서 자칫하면 내용이 명확하게 보이는 프..
-
[서비스 기획] 백오피스 도메인 공부하기1. 학습하기 2024. 11. 25. 23:00
더보기다음 글에서 이어집니다.[1. 학습하기] - [서비스 기획] 백오피스(Back Office)란백오피스는 운영되는 모든 서비스에 필요한 시스템이지만 업종과 분야에 따라 형태와 기능이 천차만별이라 설계 과정이 복잡하다.야심차게 백오피스를 기획해보자! 라고 생각했지만 막상 명확한 목표와 일정이 정해져 있는 프로젝트가 아니라 막막했다. 어디서부터 시작해야 하는지, 어떤 서비스를 대상으로 할지 모든 것을 공부해야 한다.우선 내가 할 수 있는 일부터 시작하는 것으로, 백오피스 서비스가 필요한 영역을 조사하고 어떤 기능이 필요한지 조사해 보았다.순서백오피스가 필요한 도메인공통적으로 필요한 기능내가 기획할 백오피스 서비스?백오피스가 필요한 도메인1. 전자상거래(E-commerce) 플랫폼[특징]제품, 주문, 배송..
-
제대로 알고 쓰자! - Tooltip과 Popover1. 학습하기 2024. 11. 17. 10:00
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다.Tooltip과 Popover 컴포넌트는 마치 Toast와 Snackbar의 관계와 같다. Popover는 Tooltip의 확장 형태로 더 많은 정보와 추가 콘텐츠를 포함할 수 있는 UI 요소로,많은 UI 라이브러리나 디자인 시스템에서 둘을 구분하지 않고 하나의 컴포넌트로 표현하기도 한다.다만 둘을 엄밀히 구분할 때 사용..
-
[서비스 기획] 백오피스(Back Office)란1. 학습하기 2024. 10. 12. 10:00
신입 기획자로 일을 시작하면서, 슬슬 개인 프로젝트에 대한 욕심이 생겼다.어떤 기획을 시작해볼까 고민하다 서비스의 뒷 단에서 많은 기능을 수행하는 백오피스에 도전하고 싶어졌다.프론트 페이지에 비해 레퍼런스도 적고 혼자 진행하기에는 양이 많지만 그만큼 배우는 것도 많을 것 같다.백오피스에 대한 개념부터 실제 서비스를 대상으로 한 기획까지 진행 과정에 대한 시리즈로 진행할 예정이다.목표백오피스의 개념을 정의한다백오피스 기획 단계, 항목을 정리한다각 단계별 고려 사항, 작성 문서를 정리한다백오피스(Back Office)는 무엇인가백 오피스는 일선 업무 이외에 후방에서 일선 업무를 지원하고 도와주는 부서 또는 그런 업무를 말한다.(출처 : 위키백과 https://ko.wikipedia.org/wiki/백_오피스..
-
제대로 알고 쓰자! - Dialog와 Pop-up1. 학습하기 2024. 10. 2. 16:00
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다. 두 번째 포스팅 주제는 화면 속의 화면, Dialog와 Pop-up 창에 대해 이야기 해 보자. 다음과 같은 구성으로 진행된다.Dialog? Modal?새로운 창, Pop-upDialog vs Pop-up1. Dialog? Modal?현재 열려있는 페이지에 포함된 창으로 페이지 위에 깔린 '레이어'를 말한다.다이얼로그는..
-
제대로 알고 쓰자! - Toast와 Snack bar (& Dialog, Alert)1. 학습하기 2024. 9. 24. 23:30
제대로 알고 쓰자!웹 사이트에 존재하는 수많은 Web Component. 얼핏 보면 비슷하지만 엄밀히 다르다.모두 우리의 필요에 의해 만들어진 것으로 각각의 섬세한 특징과 사용법을 가지는 특별한 존재들이다.이를 분명하게 구분하여 사용한다면 더 깔끔하고 효율적으로 동작하는 웹 사이트가 될 수 있을 것이다.헷갈리는 컴포넌트를 대상으로 분명한 목적과 차이점을 생각해보는 시리즈를 써보고자 한다. 첫 번째 포스팅 대상은 정보 전달의 목적으로 정말 자주 사용되는 Toast와 Snack bar.그리고 같은 목적(정보 전달)을 가진 컴포넌트 Dialog와 시스템의 Alert에 대해서도 간단하게 다뤄보려고 한다.사용자에게 간단한 정보를 전달하기 위한 여러 컴포넌트들을 종합적으로 분석해보자. 다음과 같은 구성으로 진행된다..
-
신입 기획자의 역기획 : 네이버 블로그 (2)1. 학습하기 2024. 8. 31. 18:00
이전 포스트에서 이어지는 내용입니다.[1. 학습하기] - 신입 기획자의 역기획 : 네이버 블로그 (1)03. 화면 설계 분석사용 도구 : PowerPoint 화면 목록 PC 환경 (웹)모바일 환경 (앱)메인 홈메인 홈포스트 작성포스트 작성통계 분석통계 분석 클립 특징이나 개성이 뚜렷한 몇몇 화면을 선정해서 분석했는데도, 어느 정도 수준까지 분석을 진행해야 하는지 결정하는 것이 어려웠다. 04. 서비스 문제점 발견4.1 내가 사용하면서 개인적으로 느꼈던 불편함어릴 때 사용했던 블로그 형태와 크게 달라지지 않은 UI특히 블로그 꾸미기, 메뉴 관리에 대해서는 아예 변화가 없는 듯함중요한 부분이 아니라서 그럴 수도? 아니면 이미 너무 잘 만들어두어서 고칠 필요가 없다?익숙해서 편했지만 발전이 없었다는 점..