728x90

분류 전체보기 294

4. 일정표 만들기

일정 산출 (WBS) 일정 산출(WBS: Work Breakdown Structure)은 크게 두 가지 목적을 가지고 있다. 첫째는 프로젝트 데드라인을 예측하기 위함이다. 기능정의서나 정책정의서를 참고하여 기능별로 나눠진 작업기간을 합산하면 최종 완료일을 예상할 수 있다. 웹사이트 개발이 끝나면 마케팅이나 제휴 등의 업무를 해야 하므로 클라이언트나 CEO에게 완료일을 공유하는 것이 좋다. 둘째는 데드라인에 맞추어 세부 일정을 조율하기 위함이다. 프로젝트 기간은 곧 비용을 의미하므로 기획자는 일정표을 참고하여 세부일정을 조율해야 한다. https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=devks0228&logNo=221588871551..

3. 정책 정의서 작성하기

정책 정의서는 웹사이트 전반의 운영기준이나 기능의 이용범위를 정리한 문서이다. 상품평은 누구나 쓸 수 있을까? 상품의 배송비는 얼마로 책정하는 것이 좋을까? 상품을 얼마 이상 구매시 배송비를 무료로 할까? 구매후 상품 포인트는 상품 가격의 몇 %가 좋을까? 회원이 아닌 사람은 게시판 글을 작성할 수 있을까? 욕설이나 게시판 성격에 맞지 않는 글을 작성하면 어떻게 하는 것이 좋을까? 사이트를 이용하면서 발생할 수 있는 이러한 다양한 상황에서 회사는 어떻게 할지 문서로 정리하는 것이 좋다. 정책 정의서를 만들어두면 관리자나 담당자가 바뀌더라도 사용자에게 동일한 서비스 경험을 제공할 수 있다. 웹 쇼핑몰의 주요한 정책은 배송정책, 교환/환불 정책, 구매정책 등이 있다. https://support.google..

2. 기능 정의서 작성하기

앞에서 라라마켓의 컨셉과 특징에 대하여 개략적으로 알아보았다. 이제는 사이트 특징에 맞게 웹사이트에 필요한 모든 기능을 세세하게 정의한다. 이렇듯 기능 정의서는 웹사이트가 어떤 방식으로 동작할지에 대하여 기능별로 구분해서 사용자가 실제 사용하는것처럼 문서로 설명한다. 기획자, 디자이너, 개발자는 작성된 기능 정의서를 검토하고, 웹사이트에 어떤 기능들이 들어가있고, 자신이 어떤 기능을 담당해서 작업해야 하는지 미리 예상해본다. 또한, 클라이언트나 CEO는 기능 정의서를 보고, 웹사이트의 제작범위나 제작기간에 대해 의논할 수 있다. 기능정의서 탄생배경 https://m.blog.naver.com/heyarech07/221164495460 [Do it 웹 사이트 기획 입문] 기능 정의서 작성 방법과 작성 사유..

1. 사업계획서 살펴보기

지금부터는 '라라마켓(LaLa Market)' 이라는 가상의 여성의류 쇼핑몰을 기획해볼 예정이다. 이에 앞서 기획을 진행할 쇼핑몰이 어떤 배경에서 나왔는지 또는 어떤 문제를 해결하기 위하여 제안된 것인지 알아보자! 웹 쇼핑몰이 추구하는 가치나 목적을 숙지하고 있어야 기획의 컨셉이나 방향을 잡을수 있다. 사업계획서를 함께 검토해보면서 웹쇼핑몰의 특징과 필수기능을 확인해보도록 한다. 골대를 목표로 공을 차야 들어간다. 이와 같이 웹사이트가 추구하는 목표에 맞게 기획의 방향을 잡아야 한다. 사업의 필요성 의류 쇼핑몰 시장은 수많은 업체가 진출한 레드오션이며 경쟁이 치열하다. 이러한 시장에서 살아남기 위해서 업체들은 일반적으로 다른 업체들보다 눈에 띄기 위하여 상당한 광고비를 지출하여 마케팅을 한다. 그렇지만 ..

2. 웹 쇼핑몰 기획의 필수 개념

상품 카테고리 웹쇼핑몰에서 자주 등장하는 개념이 카테고리이다. 쇼핑몰 카테고리는 판매되는 상품군 또는 상품그룹이다. 쇼핑몰에는 판매하는 상품이 수없이 많고 다양하기 때문에 비슷한 특징을 가진 상품들을 하나의 그룹으로 묶어서 사용자가 검색하기 쉽도록 해야 한다. 예를 들어 유사한 파일을 특정폴더에 정리한다거나 마트에서 음식코너, 과일코너, 의류코너와 같이 분류하는 것은 모두 사용자가 물건을 찾기 쉽도록 카테고리로 분류한 것이다. 카테고리는 웹사이트 메뉴와 동일한 개념이 아니다. 카테고리는 상품군이고, 메뉴는 웹사이트에서 사용자가 접근하는 특정 경로를 의미한다. 상품카테고리는 관리하기 편해야 한다. 웹쇼핑몰이 처음 생성될때 분류한 카테고리가 계속 유지되는 경우는 드물다. 유행에 따라 또는 사용자 반응에 따라..

1. 웹 쇼핑몰과 다른 웹사이트와의 차이점

홍보용 웹 사이트 홍보용 웹사이트는 가장 간단한 유형이다. 글과 그림으로만 사용자에게 내용을 전달한다. 회원가입 기능이 있는 경우도 있지만, 구조가 간단해서 작업시간과 제작 비용을 절약할 수 있다. 대표적인 홍보용 사이트는 회사 홈페이지다. 회사 홈페이지는 화면수와 기능이 많지 않기 때문에 설계와 개발단계는 쉽지만, 많은 시간을 회사 브랜드 분석에 쏟아야 한다. 기업의 브랜드와 핵심가치를 표현하고, 사용자들에게 온전히 전달하려면 캐치프레이즈 같은 문구와 페이지에 들어가는 이미지에도 신경써서 선정해야 한다. 하나의 상품을 브랜딩하는 것과 유사하며, 기능보다 가치 전달에 집중하는 웹사이트이다. https://www.sk.co.kr/ SK SK공식 홈페이지입니다. 기업문화, 역사, SUPEX추구협의회 및 계열..

0. 피그마 시작하기

https://www.codestates.com/blog/content/%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95 피그마(Figma) 사용법 | 기본 단축키부터 유용한 기능까지 - 코드스테이츠 공식 블로그 UX/UI 분야에서 커리어를 쌓고 싶다면 피그마는 필수로 알아야 할 툴이 되었는데요. 이번 글에서는 피그마 소개와 피그마가 주목받는 이유 그리고 피그마 단축키, 유용한 기능 등 기본적인 사용 www.codestates.com https://brunch.co.kr/@applehong 기획자 첼라의 브런치스토리 레탑피그마 기획자 | 현직 시니어 웹기획자입니다. Figma 를 이용하여 화면 설계, 디자인, 프로젝트 관리까지 실무에서 경험한 노하우를 나..

디자인/피그마 2023.11.15

26. 소셜로그인 - 네이버 로그인 후 프로필 정보 보여주기

https://velog.io/@2ast/React-Native-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC React Native) 로그인에 대하여 아마 아무나 붙잡고 '로그인이 무엇인지 아느냐'라고 묻는다면 모두가 '안다'라고 답할 것이다. 우리는 평소에도 숨쉬듯이 로그인이라는 단어를 말하고, 실제로 의사소통에 큰 무리가 없을 정도 velog.io npm install @react-native-async-storage/async-storage 리액트 네이티브에서 로컬스토리지를 사용하기 위하여 해당 라이브러리를 설치한다. 네이버 로그인후 발급받은 액세스 토큰을 저장하기 위함이다. import React, {useState, useE..

25. 소셜로그인하기 - 네이버 로그인 구현하기 (라이브러리 사용 안함)

https://reference-m1.tistory.com/368 [Front end] SNS 로그인 연동(네이버, 카카오) with React SNS 로그인 SNS 연계에 필요한 개발자 및 앱 등록은 간단하므로 샘플 소스 위주로 정리하였다. 실제 로그인 연동 및 사용자 정보까지 연동이 되는 React 코드이다. developers.naver.com NAVER Developers 네이 reference-m1.tistory.com import React, { useState, useEffect } from 'react' import { SafeAreaView, View, Text, StyleSheet, StatusBar, ScrollView, Dimensions, ImageBackground } from ..

24. 드롭다운 선택시 선택한 아이템 상단에 표시하기

import React, { useState, useEffect } from 'react' import { View, Text, StyleSheet, ActivityIndicator } from 'react-native' import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/MaterialIcons' ..

728x90