분류 전체보기

기획자가 소셜 회원가입/ 로그인 기획 시 알아두어야 할 것 2편으로 포스팅으로 돌아왔습니다. 개발자에게 일 잘하는 기획자로써 인정받고 싶다면 1. 사용자 프로필 정보에 필요한 DATA 항목을 정리하자 기획자라면 공감할 이야기를 하나 해보고자 한다. SNS 소셜회원가입/로그인 기능을 추가하기 위해 개발자에게 가능여부를 여쭤보려고 할 때 개발자들은 '화면 혹은 기획서를 보고 이야기하자'라고 한다. 왜 그럴까? 아마 개발자들에게는 기능이 어떤 방식으로 구현되어야 하는지(로직), 어떤 데이터가 어디에 표출되고 이동되어야 하는지가 가장 중요해서 그럴 것이다. 그래서 개발자는 우리가 작성하는 화면설계에서 가장 중요하게 보는 것이 1. 데이터항목 2. 기능일 것이다. 1. 무엇을 2. 어떻게 구현해야 할지에 초점이 ..

Variable이란? Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다. 개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임의의 데이터 값에 '속성이름'을 달아 저장하는 개념이다. 기획단계, 디자인 단계에서 버튼A를 반복적으로 사용하고 Text 값만 변하게 된다고 가정했을 때 매번 새롭게 제작한다면 버튼의 크기, 색상 등이 달라질 가능성이 크고 설계 시에 일관적인 화면을 제공할 수 없다. 그렇기에 변수(Variable)를 설정해서 반복적으로 재사용하는 것이 시스템의 일관성 측면에서 좋다. 피그마에서 저장할 수 있는 변수와 패널 ' 숫자, 문자열, 논리형, 색상'으로 총 4가지 데이터 형식을 변수로 저장할 수 있다. 변수 ..

소셜로그인 서비스란? 소셜(SNS) 로그인 서비스는 네이버, 카카오, 구글 등의 서비스에서 사용자 인증 기능을 이용할 수 있도록 하는 서비스로써 별도의 아이디나 비밀번호를 기억할 필요 없이, 소셜(SNS) 아이디로 간편하게 로그인할 수 있는 서비스이다. 소셜 회원가입/ 로그인의 이점 [사용자입장] - 간편하고 빠른 회원가입이 가능하다. - 여러가지 개인정보 입력과 본인인증에 대한 번거로움을 제거할 수 있다. - 하나의 소셜계정 로그인을 통해 안전하게 다른 서비스를 이용할 수 있다. [소셜 회원가입/ 로그인 제공사 입장] - 소셜 로그인 기능을 도입한 서비스와 다양한 협업/ B2B 사업을 진행할 수 있다. (결제 연동, 캘린더, 카페 등) - 사용자가 서비스 이용 시 제공하는 데이터를 통해 사용자 니즈와 ..

결론부터 말하자면, 가능하다. 사용자가 휴대폰 본인인증(PASS앱)을 통해 인증받은 번호를 리턴값으로 보내주면 인증받은 번호로 알림톡을 보낼 수 있다. 휴대폰 본인인증 번호로 알림톡을 발송하는 이유가뭐야? 사용자의 데이터 입력실수로 인한 알림톡 미발송 알림톡 발송 시점이 서비스 신청 완료 시점이기 때문에, 부정확한 데이터를 입력했더라도 수정할 수 없기에 혼란에 빠지기 쉽다. 그렇기에 인증받은 번호로 알림톡을 발송한다면, 인증받은 본인 휴대폰으로 알림톡을 받을 수 있다. ABOUT 휴대폰 본인인증 휴대폰 본인인증이란? 본인 명의의 휴대폰인지와 해당 휴대폰을 보유하고 있는지 동시에 확인하는 본인확인 서비스로써, 본인확인 결과로 통신사에 등록된 명의자 정보와 휴대폰번호를 수집할 수 있어, 회원가입 및 본인확인..

오토레이아웃? 프레임에 자동으로 간격을 걸어주는 기능으로, 프레임을 동적으로 (콘텐츠에 반응하도록) 만들어준다. 주로 Web, 반응형 모바일 작업시에 유용하게 사용되고 작업시 디자이너, 퍼블리셔, 개발자 간의 오류사항을 줄여줄 수 있다. 오토레이아웃 만들기 (단축키) 1. 개체 우클릭 > Add auto layout 2. 우측 탭에서 Auto layout + 버튼 누르기 3. 단축키 : Shift + A 오토레이아웃 해제하기 1. 프레임 선택, 언그룹 2. 우측 오토레이아웃 마이너스 3. 단축키 : Ctrl + Shift +G or Ctrl + 백스페이스 오토레이아웃 패널 활용방법 알려줘! 1. 레이아웃 방향 : 자동으로 요소간의 레이아웃을 배치할 방향을 설정하는 기능이다. 반응형에서는 주로 꺾은 아래 ..

해당 포스팅은 피그마 사용에 있어 기본 컴포넌트와 플러그인, 댓글기능에 대해 설명해놓았습니다. 기본 컴포넌트는 화면 제작시 유용하게 사용되므로 응용방법까지 익혀두시면 좋을 것 같습니다. 아래에는 유용하게 사용되는 플러그인 best 7을 뽑아 사용방법과 함께 작성해 두었습니다. 기본 컴포넌트 (사각형, 선, 화살표, 원, 세모, 별, 이미지) 어디서 사용할 수 있나? 응용방법도 알려줘! (Feat. 도넛링 만들기, 파이차트 만들기) 사각형 변형하기 응용방법은 간단하다. 도형 선택 → 모서리 안쪽의 점을 선택 → 중앙으로 드래그하면 둥근 사각형 제작이 가능하다. 한쪽 모서리 라운드 처리를 위해서는 Alt키를 누르고 점을 드래그하여 라운드를 만든다. 또한 디자인 패널에서 라운드 값을 설정하여 변경할 수도 있다..

해당 포스팅은 프레임과 섹션, 그룹의 차이점을 설명해 놓은 글입니다. 프레임(Frame)은 화면요소와 화면을 담는 컨테이너이고, 섹션(Section)은 화면들을 담는 단위, 그룹(Group)은 화면을 묶는 단위입니다. 추가적으로 콘스트레인츠(Constraints) 개념까지 함께 정리해놓았습니다. 요약하자면, 섹션(Section) : 화면을 담는 단위로써 프레임과 화면 요소들을 담을 수 있다. 프레임 내에 담을 수 없다. 프레임(Frame) : 화면요소와 화면을 담는 컨테이너(그룹)이다. 속성을 변경하더라도, 콘텐츠에 영향을 미치지 않는다. 그룹 (Group) : 화면들을 묶는단위로써 컨테이너 역할을 하지 않는다. 속성을 변경하면 콘텐츠에 영향을 미친다. 프레임, 섹션, 그룹 어떻게 사용하는데? 프레임을 ..

해당 포스팅은 피그마 기본 화면구조와 기능에 대해 정리한 글입니다. 기본 화면구조와 화면구조에 해당하는 Move, Scale, Local variable, Local style, Export 컴포넌트들이 어떤 기능을 하는지에 대해 정리해 놓았습니다. 기본기와 기본 기능만 잘 활용해도 금방 익숙한 툴이 될 거라고 생각이 듭니다. 1. Move, Scale 1) Arrow 컴포넌트 1-1. Move 피그마에서 컴포넌트를 이동할 때 사용하는 도구이다. 단축키 : V 1-1. Scale 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해 사용하는 기능으로 개체의 선, 폰트 크기가 비율에 맞춰 리사이징이 가능하다. 단축키 : K 2) Project Name 해당 ..