서비스 기획자는 내가 될게, 공부는 누가 할래?

서연주 UI 디자이너(UI LAB 운영) 인터뷰 인사이트 정리1. UI의 역사스마트폰과 같이 화면의 크기가 제한적인 요소를 가진 디지털 기기들이 등장하며, 제한적 화면을 효과적으로 사용하기 위해 쉽고 직관적인 UI에 대한 관심이 높아지게 되었다. 현재 우리가 사용하고 있는 아이콘이나 메뉴들을 GUI(Graphical User Interface), 그래픽 사용자 인터페이스라고 한다. GUI는 마우스의 등장 이후에 발전하게 되었고, 최근 UI는 AI 기술이 발전하면서 제스처나 음성 기반의 다양한 방식으로 표현된다.  컴퓨터는 직관적인 화면 배치가 가능하나, 스마트폰의 경우 화면이 작기 때문에 원하는 기능을 어떤 위치에 어떤 방식으로 표현해야 하는지에 대한 사용성 연구가 오래도록 지속되었다. 예를들어 햄버거바..

회원 가입 화면 (sign-up screens) 구상 전략회원가입 페이지는 이메일 주소나 사용자의 필수 정보를 수집하여 제품이나 서비스에 등록하도록 설계된 랜딩 페이지입니다. 회사는 신규 고객의 트래픽을 유치하기 위해 마케팅 캠페인을 집행하거나 웹 사이트 개편과 같이 다양한 노력을 기울입니다. 돈은 돈대로 썼는데 회원가입 페이지에서 유저를 놓쳐 서비스를 소개할 기회를 놓친다면 너무 억울할 거 같아요. 회원 가입 랜딩 페이지의 디자인에 따라 이끌어온 트래픽을 안정적으로 유치시킬 수도 있고, 공들여 디자인한 반면 사용자의 주위를 분산시켜 트래픽 유실이 발생될 수도 있다는 아티클을 읽고 흥미로워 포스팅하게 되었습니다! 사용자의 마찰을 줄이고 원활한 온보딩을 위해 functional design과 delight..

제이쿼리 animate 메서드 특징과 사용법css에서 동작에 대한 시간을 부여하기 위해선  transition 속성을 동작을 수행하는 선택자마다 직접 넣어줘야 하는 번거로움이 있었습니다. 반면, animate method는 동작을 바꿈과 동시에 시간을 같이 부여하는 특징을 가지고 있습니다! .animate() = 애니메이션 동작을 부여할 수 있는 메서드, 시간에 대한 속도를 부여함$("선택자").animate({명령내용},시간,'이징효과'); animate 메서드에서의 시간은 밀리초단위를 사용합니다 밀리초단위(millisecond, ms)=천 분의 1초1초=1000ms, 0.5초=500ms 이징효과 종류1. ease : 기본값2. ease-in : 속도의 시작이 느리게3. linear : 일정한 속도4...

jquery(제이쿼리) 기초문법, 실행명령 살펴보기jquery(제이쿼리)는,자바스크립트 라이브러리, 웹개발을 간소화하기 위해 사용하는 프로그래밍 언어입니다.일간에서는 제이쿼리를 리액트의 등장으로 인해 더 이상 사용하지 않는 언어라고 하지만, 에이전시의 88%가 사용하고 있고 최근까지도 업데이트가 활발하게 이뤄지고 있습니다.(누군가 여러분에게 제이쿼리 왜배움?이라고 하면 님 에이젼시 가봄?이라고 대답해 보세요 호호)  자바스크립트는 크로스브라우징이 안됐기 때문에 점차 사용빈도가 줄어들었고, C언어기반으로 문법이 어려워 진입장벽이 높다는 단점이 있었습니다. 컴퓨터공학과를 나오는 분들은 정석으로 C언어 > 자바스크립트 > 제이쿼리 순으로 배워나가겠지만, 저는 단기간 웹퍼블리셔 과정을 듣고 있는 상황에서 제이쿼..

당근 역기획 2. 서비스 프로세스 분석 당근 비즈니스 모델의 핵심은 생활권 내의 매칭 정확도에 있습니다. 찾고자 하는 중고 물품이나 동네 생활 정보의 정확도가 높을 수록 앱 체류 시간이 증가하기 때문이죠! 매칭 로직의 정확도를 알아보기 위해선 서비스가 어떤 데이터를 수집하고 있는지 먼저 프로세스 분석을 통해 파악해야 합니다. 중고 물품을 판매하는 시점에서는 어떤 정보를 입력하는지, 관심 있는 상품을 검색하기 위해선 어떤 조건과 정보를 입력해야하는지가 해당되죠.  저는 이번에 역기획이 처음이라 당근의 광고 매칭 로직까지 파악하진 못했는데요. 저처럼 데이터 가설을 세우기 어렵거나, 서비스의 핵심 로직이 부재한 경우에는 서비스를 이루는 핵심적인 프로세스에 따른 정책들을 정리하는 것도 좋은 방법입니다! 프로세스..

'지역 기반 커뮤니티 플랫폼' 당근 역기획 1단계, 비즈니스 모델 파악 기획자는 단순히 와이어프레임을 그리는 사람이 아닙니다.  UI를 UI 구조만으로 보는 것이 아닌, UI가 만들어지기까지의 사고 과정을 따라갈 줄 알아야 하는데요. 비즈니스모델 역기획은 프로젝트 경험이 없는 주니어 기획자들이 기획을 연습하기 가장 좋은 방법입니다! STEP1. 당근 선정이유- 2023년 8월 '당근마켓'에 '마켓'을 분리하고 '당근'으로 리브랜딩에 성공하며 2024년 흑자로 전환한 비즈니스 모델로 서비스 성장 사례를 통해 인사이트를 얻기 위함- 서비스 본질의 방향성(지역 기반 커뮤니티)과 시장의 방향성(하이퍼로컬)이 일치하며 시너지 효과를 내고 있음 (서비스명에서 '마켓'을 떼어낸 이유도 개인 간 거래보다 커뮤니티 기능..

서비스 기획자 관점에서 기획하는 법서비스 기획자는 전략에서부터 끊임없이 다음과 같이 되묻습니다. "그걸 어떻게 할 건데?"단순한 개선안에서 그치지 않기 위해서 이런 질문을 반복해야 한다는 것인데요. 이번 포스팅에서는 '어떻게'의 How 포인트를 차례로 살펴보겠습니다.   자주 사용하는 모바일 앱이나 서비스에 대한 개선사항과 개선 방안을 만들어보라고 하면, 대부분 평소 자신이 사용하면서 겪었던 불편 사항들을 개선하는 방향으로 기획을 하게 됩니다. 저도 카카오톡 '펑' 기능을 분석하고 개선 방안을 냈을 때 제가 개인적으로 사용하면서 느꼈던 생각이나 불편했던 점을 기반으로 개선안을 냈었죠. 하지만 근거 없는 pain point 나열은 고객센터에 문제사항을 제기하는 것에 그치지 않는데요. 우리의 기획이 설득력 ..

css 레이아웃 overflow 속성 overflow 란,부모박스에서 내용물이 넘치는 경우 어떻게 보여질지 결정하는 속성입니다.  overflow를 사용하는 경우는,1. 배치된 요소(float) 만큼 크기를 주고 싶거나2. 넘치는 콘텐츠 값을 제어하고 싶을 때 사용합니다.  아래의 콘텐츠 양에 따른 표현 비교예시를 통해서 overflow에 대해 자세히 알아보도록 하겠습니다. 1. 콘텐츠양이 일정먼저, 부모박스에서 내용물이 넘치지 않고 콘텐츠의 양이 일정한 경우에는 다음과 같이 보여지게 됩니다.  html 콘텐츠양이 일정 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque aut quae, quo illum sapiente vit..

html 글자태그 5개 이상 활용하여 자기소개 만들어보기 지난 포스팅에서 글자 태그의 블록요소와 인라인 요소에 대해 알아보았는데요. 태그에 익숙해지는 연습을 하기 위해 글자태그 5개 이상을 활용하여 간단히 저를 소개하는 html 문서를 만들어 보았습니다! 1. 코드 예시김수인취미는 와인수집, 테이스팅목표는 사람들의 습관이 될 서비스 기획날마다 새롭게, 넓고 깊어지는좌우명4년간 대구독서커뮤니티 책방일지를 운영했어요.사람들의 일상에 깊게 관여하는 서비스를 기획해보고 싶어졌습니다.열심히 공부한 내용을 티스토리에 업로드하고 있어요다가올 half marathon에 대비해 매일 달리려고 노력합니다사용한 글자 태그는 다음과 같습니다.q(인용구), ins(밑줄강조), sup(위첨자), mark(강조), strong(볼..

html 인라인 요소 글자태그 1. , 태그태그특징코드 사용- 글자를 굵게 해주는 태그- 경고, 주의사항과 같이 중요한 내용을 강조할 때 사용하는 '의미를 가지는 태그'p>strong>의미론적으로strong> 강조할 부분p>- 글자를 굵게 해주는 태그- 의미없이 시각적인 요소만 나타낼때 사용하는 태그p>b>글자 서식의b> 볼드처리p> 웹 리더기로 읽었을 때 태그는 강조되어 읽히지만 태그는 일반 텍스트처럼 읽힌다는 차이점이 있습니다. 이는 웹접근성을 고려한 것으로 코드 입력 시 단락의 의미에 따라 사용여부를 다르게 하면 됩니다. 1-1. 코드 실행 결과2. , 태그태그특징코드 사용- 이탤릭체 표현시 사용, 영어 폰트에 유용- 저자의 생각과 강조하고 싶은 부분에 '의미론적 사용'em>Hello, N..