분류 전체보기

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다. 프로퍼티(figma property)란? 프로퍼티는 "속성, 성격"이라는 의미를 가진다. 이미 완성된 컴포넌트에 속성을 더해주는 기능이다. 컴포넌트에 옵션을 주고 컴포넌트의 경우의 수를 줄여줄 수 있다. 컴포넌트 프로퍼티의 4가지 종류와 사용방법 컴포넌트 프로퍼티별로 각각 다른 특성을 가지고 있으며, 각각의 사용법도 다르다. 1. '텍스트, 불리언, 인스턴스 스왑' 프로퍼티는 옵션처럼 추가해서 적용하는 방법이며 2. '베리언트' 프로퍼티는 커스텀해서 사용하는 방법이다. 아래에서 자세하게 확인할 수 있다. - Text properties(텍스트) ✔ 텍스트 프로퍼티 컴포넌트텍스트 레이어에 속성..

메뉴구조도(Menutree)란? 메뉴구조도란 앱/웹 사이트의 메뉴와 구조를 한눈에 파악하여 볼 수 있도록 정리해놓은 문서이다. 웹사이트의 사이트맵을 생각하면 쉽게 이해할 수 있다. 메뉴구조도는 언제 작성할까? 메뉴구조도 작성은 주로 신규 서비스 구축, 서비스 고도화 시 초기단계에서 진행하는 작업으로써, 메뉴를 목적에 맞게 분류하고 추가, 수정, 삭제하여 메뉴의 구조를 한눈에 파악하는데에 목적이 있다. Depth가 뭔지 알려줘! Depth란 "깊이"라는 뜻을 가진 용어로, 화면의깊이를 뜻한다. 메인화면은 0depth가 될 것이고, 서비스 화면의 깊이에 따라 1 Depth, 2 Depth, 3Depth 순으로 정의한다. 1Depth는 그룹핑한 메뉴의 대표메뉴이다. 그렇기에 1Depth 메뉴의 이름은 하위 메..

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자. 스왑 인스턴스(swap instance)란? Swap(바꾸다) +Instance(복사본) 인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다. 왜 사용해야 할까? 인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다. (단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.) 어디에 적용될 수 있는데? Web/Mobile을 디자인 혹은 기획 시 공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인..

1. 컴포넌트(figma component) Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다. 화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로 구성한다. Component 언제든 재사용이 가능한 요소로써 원본으로 복사본까지 한번에 수정할 수 있다. 🏷 아이콘 : 더이상 쪼갤 수 없는 가장 작은 단위 🏷 모듈 : 아이콘 + Text 등 최소 단위의 조합 🏷 템플릿 : 모듈 + 모듈 + 모듈 등 여러 모듈로 조합한 요소 🏷 페이지 : 템플릿 + 템플릿= 화면으로, 모듈 조합으로 구성된 아웃풋 컴포넌트 생성시, 객체와 레이어가 보라색으로 변경된다. 2. 마스터 컴포넌트와 인스턴스 만들기 📌 마스터 컴포넌트(Master Compon..

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

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

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

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