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

대표 누리집 공식 배너영역 적용 전자정부 UI/UX 가이드라인은 누구나 쉽고 편리하게 이용할 수 있도록 사용자 중심의 공공 웹·앱을 구축, 운영 및 관리하도록 지원하기 위해 정립되었습니다.  KRDS 사이트에 가이드라인이 공개되면서 내가 운영하고 있는 사이트가 해당 가이드를 잘 따라가고 있는지에 대한 점검이 필요한데데요. 앞으로의 포스팅에서는 각 항목별로 사이트 가이드 적용 방안을 어떻게 확인하면 좋을지에 대해서 알아보도록 하겠습니다!   공식 배너공식 배너는 사용자가 대한민국 정부 조직 및 관련 기관에서 운영 및 관리하는 디지털 정부서비스임을 식별할 수 있도록 제공하는 정보 배너입니다.   ** 공식 배너 적용시 유의사항1. 배너 텍스트와 스타일을 변형하지 않는다. (중요)모든 디지털 정부서비스에서 일..

전시/공연을 등록하는 관리자단을 설계하면서 구분값으로 전시와 공연 두 가지 옵션을 주는 UI가 필요했다. 처음 설계에서는 셀렉트 형식의 옵션리스트로 설계했다. 사수분께서 설계안을 보시더니 '옵션이 두 가지 일때는 라디오버튼으로 표시해도 좋을거 같아요'라고 말씀해주셨다. 그래서 공부하게 된 라디오버튼과 체크박스! (Select와 Drop down도 공부해야겠다) 1. 라디오 버튼(Radio button)라디오 버튼은 사용자가 여러 개의 옵션 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다. 중요한 점은, 사용자가 옵션 목록에서 새로운 라디오 버튼을 선택했을 때, 기존에 선택되었던 옵션은 자동으로 선택이 해제되어야 한다는 것이다.   1-1. 라디오 버튼 사용 경우(1) 사용자가 옵션 목록에서 한 ..

서연주 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..