새로운 친구들을 영입했다. 팀을 운영한다는 것이 생각보다 만만한 것이 아니다.

적은 투자 자본을 가지고 늘어난 인건비를 감당하는 것은 쉽지않을 뿐더러 사람이 늘어났기 때문에 마냥 효율적인 것도 아니다.

의견 충돌이 있을 수 있고 개개인의 사정이 있어 모두가 다 윈윈하기가 쉽지 않다. 총 4명이 함께 하고 있는데 이 쇼핑몰을 부탁한 친구, 나, 개발자 친구, 디자이너 친구가 있다. 취준 또는 취업, 사업으로 시간이 넉넉하지는 않다. 시간과 돈이 부족한 상황에서 과연 이 들을 어떻게 이끌어 나갈지 일단 지금까지 한 부분은 요구사항을 구체적으로 정의하고 어떠한 페이지들이 필요한 지를 파악했다.

소규모의 팀이 처음부터 끝까지 프로젝트를 하는 것이다.

제일 처음 한 것은 웹 기획을 공부한 것이다. 어느 정도 규모가 있는 기업에서는 요구제안서→기획(요구사항 분석, 벤치마킹, 브레인 스토밍)→와이어프레임→스토리보드→디자인→개발 이렇게 순서를 한다고 한다. 그 과정에서도 여러차례 수정과 변화를 거쳐 디자인에 들어갈 수 있다.

하지만 제한된 시간과 자본으로는 정석처럼 할 수 없는 것이 당연할 것이다. 모두가 처음 이렇게 프로젝트를 하는 것이었다. 고객친구와 우리는 질의 응답을 통해 서로를 알아가기로 했다.

  1. 브랜드 컨셉과 홈페이지를 만드는 이유 및 필수 요청사항 등 서로에게 필요한 것을 물어보고 답하였다.
  2. 기존에 가지고 있던 스마트 스토어 페이지나 다른 가구점 쇼핑몰을 참고하여 페이지를 나누고 페이지 별로 필요한 기능들을 구성했다.
  3. 와이어프레임을 짜기위해 xd를 사용하려고 한다.

가만보니 규모가 있는 기업에서 하는 것과 똑같이 하고 있다.

몇가지 의견 충돌이 있었는데 그걸 해결해준 사람은 우리중의 한 사람이 아닌 실무를 하시는 분이었다. 내 생각엔 이런 프로세스를 몰랐기 때문에 오해가 생기고 충돌이 생긴 것이 아닌가 하는 느낌이다. 하지만 실무자 분께서 이런 프로세스를 처음부터 끝까지 알려주셨고 그걸 몰랐던 사람들이 그 과정을 알게 되니 왜 그런지를 이해하고 해결방법을 찾아나가기 시작했다.

이래서 경험이 중요한 것 같다.

'친구쇼핑몰 만들어주기' 카테고리의 다른 글

웹 기획 단계 0 알아보기  (0) 2022.02.10

vscode에는 원격으로 ssh를 활용할 수 있는 remote ssh라는 extension이 있습니다.

작업을 할 때 클라우드서버를 이용하게 되면 왔다갔다 해야하는 번거로움이 있습니다.

vscode에서 remote ssh를 통해 vscode만 키면 바로 해당 서버로 접속되게 된답니다!!!

파일을 전송할 때에도 그냥 vscode로 파일을 끌어오기만하면 업로드가 되고 빼내면 다운로드가 되기 때문에 ftp를 크게 사용할 일이 없습니다.

window, gcp, vscode 기준으로 remote ssh 연결하는 방법 시작합니다.

준비물로는 gcp 계정, gcp compute instance, vscode, putty & putty gen이 필요합니다.

https://velog.io/@woo0_hooo/GCP-원격서버-vscode로-접속하기이 블로그를 참고하였습니다. 중간 과정은 생략하고 오류 해결만 작성하도록 하겠습니다.

이렇게 config파일을 설정하고 실행하면 permission에러가 뜨게 되는 순간이 있습니다.

key파일의 권한이 제대로 부여되지 않았거나 user이름이 정확하지 않아서 그러한 경우입니다.

  1. user이름이 정확하지 않은 경우

1-1 GCP콘솔 → Compute Engine → 메타데이터 → SSH키 에서 추가한 rsa키의 사용자 이름을 User에 넣는 방법입니다.

1-2 혹시 이게 통하지 않은 경우 ComputeEngine → VM인스턴스에서 연결하고자 하는 ssh를 브라우져를 통해 열어주시고 부팅이 다 되면 whoami를 입력해서 사용자 이름을 알아내는 방법도 있습니다.

  1. Key파일의 권한이 제대로 부여되지 않은 경우

2-1 맥이나 linux에서는 chmod를 통해 권한을 바꿔줄 수 있습니다.

chmod 777 * //모든 파일에 모든 권한 부여

2-2 윈도우

Key파일에 마우스를 대고 우클릭 → 속성 → 보안 → 고급 →상속 사용 안 함 → 적용&확인 → 편집 → 제거 * 4번이상 클릭해서 모든 사용자 제거 → 추가 → 윈도우 사용자 이름 (Users 또는 사용자 폴더로 들어갔을 때 공용을 제외하고 나오는 이름 중 하나입니다.)을 넣어주시고 이름 확인 →에러가 나지 않는 다면 확인*3을 눌러 권한부여를 마무리 합니다.

vscode로 원격 서버 사용하기 끝!

flutter는 다트 기반 모든 틀에 맞게 개발하고 배포할 수 있는 장점이 있는 프레임워크이다.

firebase는 쉽게 서버의 기능을 이용할 수 있게 해준다. 제한이 있고 넘어가면 과금

둘 다 구글에서 지원하고 있다.

firebase에서 다양한 기능을 flutter에서 사용하려면 flutterfire_core라는 플러그인이 필요하다.

firebase console에서 그 기능을 사용할 수도 있지만 코드와 연결 시키려면 cli를 통해 설치 및 설정이 필요하다.

https://firebase.google.com/docs/cli#install_the_firebase_cli 이 곳에서 운영체제에 맞게 설치를 할 수 있다.

mac 사용자이면서 node를 지금은 사용하지 않았기 때문에 curl로 아래와 같이 설치해 주었다.

curl -sL <https://firebase.tools> | bash

설치가 끝나면 permission과 프로젝트 선택 때문에 로그인이 필요하다.

firebase login

다른 앱에서 사용하려면 firebase init을 사용하면 되지만 flutter에서 사용할 것이기 때문에 다른 방법으로 init을 한다.

https://firebase.flutter.dev/docs/overview 이 사이트는 flutterfire를 다룬다.

위의 firebase 설치 과정이 없으면 flutterfire를 해도 계속 에러가 날 수 있다.

새로운 플러터 프로젝트를 만들고 (이미 있다면 migration해야하므로 https://firebase.flutter.dev/docs/migration 이 곳을 참고 하는 것이 좋다.) 터미널에 아래처럼 flutterfire및 파이어베이스 코어를 설치하고 설정한다.

flutter pub add firebase_core

dart pub global activate flutterfire_cli

flutterfire configure

오류 없이 설치가 되었다면 패키지를 불러오기 및 firebase를 앱에 init해 준다.

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

flutter와 연결은 끝!

웹 기획자

저는 기획을 해 본 적이 없습니다. 경영에 대한 지식도 없고 아무것도 없는 바닥인 상태임을 인정합니다. 그래서 몇몇 사람들에게 열등감을 느꼈습니다. 바둑에서 진 것 같이 말이죠. 예전에는 이 감정을 느끼고 자신감만 깎아 나갔지만 겁내지 않고 그림 그리는 법이라는 책을 읽고 열등감이 에너지라는 말이 떠올랐습니다. 자신이 필요한 부분이 열등감으로 나타나고 그것을 알아차리면 큰 성장을 할 수 있다는 말이었습니다. 그래서 기획을 공부하기로 했습니다.

https://brunch.co.kr/@nonem/1 블로그 글 정리

마케팅, 컨셉 및 방향에 맞게 사이트의 구성 및 콘텐츠의 배치 작업을 하는 사람 → 필요한 콘텐츠를 설계하고 구성해야 합니다.

필요한 역량 소통능력(고객과 개발자 간의 중매자 역할) 및 문서작업을 통해 전달하는 능력(개발자를 위한 문서화 업무)

3가지 마음가짐

  1. 스케줄링 - 프로젝트 == 정해진일정 → 자기관리
  2. 업무습관 왜? 어떤 용도로 사용할 것인지 항상 확인하는 것
  3. 마음을 읽어주는 능력 - 칭찬 - 존경받는 리더

프로젝트 시작

절대 흔들리지 않는 것이 ‘사업의 목적과 목표’ == 대전제 ( 왜 이걸 해야하는 지에 대한 궁극적인 목표)

RFP(요구사항 제안서)를 받으면 이것을 토대로 기획으로 넘어갑니다.

요구사항 분석

고객이 준 rfp를 가지고 무엇이 필요한 지를 구체적으로 분석하는 부분

  1. AS-IS - 현재 상황(시스템의 서버 환경, 온라인 서비스 운영 구조, 사용성, 확장성, 가독성, 일관성, 명확성)을 분석하는 단계

1-1. 타겟 분석 ⇒ 주된 사용자 층의 성병, 나이, 지역, 행동 패턴, 소비 패턴, 왜 이 온라인 서비스를 방문했는지

1-2. 벤치 마킹 ⇒ 경쟁사와 우수사의 벤치 마킹 항목(기준)을 먼저 정하고 “인사이트”를 얻을 수 있어야 합니다. 벤치 마킹이 꼭 필요하고 목적성이 분명하면 할 수 있지만 그렇지 않다면 꼭 할 필요는 없다고 합니다.

  1. TO-BE - 수행기획안 RFP와 AS-IS의 분석을 통해 어떤 격차가 있는 지를 명확하게 알았다면 메인 페이지 기획 컨셉과 디자인 시안이 같이 준비되어집니다.

IA(메뉴 구조)설계

  • 엑셀로 모든 기능을 쭉 적어보고 여러 필터를 거쳐 추리는 과정입니다. 어느 부분에 들어갈 기능인지, 들어가야하는 기능인지 아닌지를 요구사항 제안서를 잘 살펴 확인합니다.

와이어 프레임

  • 손그림으로도 그려서 구상할 수 있는 단계이며 전체적인 틀을 잡고 동선을 짜고 디자인 시안을 구상할 수 있는 단계입니다. 목업툴이 여기서 사용될 수 있습니다.

플로우차트

  • 동선과 흐름을 표시한 것으로 순서도로 나타내기도 하고 스토리보드에 얹기도 합니다. 콘티 느낌이 강합니다.

프로토타입

  • 사용감 테스트를 위해 비슷하게 대략적으로 구현한 것이며 진짜 개발은 아닙니다.

지금 해야하는 부분은 IA설계와 와이어 프레임 제작이라고 느꼈습니다. 이미 기능들이 이미 갖춰진 페이지가 있고 그것을 리뉴얼 하는 것이라고 판단하면 될 듯 합니다. 디자인 컨셉과 상품의 소재가 변경될 수는 있지만 이미지로 커버가 가능할 것 같기에 여러 레이아웃 도안을 작성하기로 했습니다.

 

'친구쇼핑몰 만들어주기' 카테고리의 다른 글

팀구성  (0) 2022.02.14

scss로 틀을 만들어서 중복되는 곳에서 사용하면 되는 부분이었는데 클래스로 모듈을 만들어 버려서 한쪽은 되고 한쪽은 안되어야하는 부분일 때도 둘 다 동시에 되게 됐습니다.

//module
@mixin module{
	.className{
		...//들어갈 내용
		@content
	}
}
@import './module'

#one{
...
}
@import './module'
#two{
...
}
<div class="className" id="one"></div> 
<div class="className" id="two"></div>

위와 같은 상황에서 className의 display를 이벤트에 따라 none 또는 block으로 보여지고 안보여지고를 만드는 기능이었습니다.

하지만 클래스를 다른 아이디에 같이 놓음으로서 중복이 될 수 있기때문에 능지 수쥰이 되어버렸습니다.

해결한 방법은 각각 css를 따로 주는 것이었는데 동시에 주면서 각 이벤트에 따라 따로 작동하도록 하려면 어떻게 해야할까요?

클래스로 정의하지 말고 @mixin 안에 그냥 코드로 module화 한다면 이벤트에 상관없이 따로 작동할 수 있습니다.

//module
@mixin module{
		...//들어갈 내용
		@content
}
@import './module'

@include module{
	#one{
	...
	}
}
@import './module'

@include module{
	#two{
	...
	}
}
<div class="className" id="one"></div> 
<div class="className" id="two"></div>
  • 좀 황당했던 사건

디자인대로 페이지를 만들고 있었는데 완성된 것이 떡하니 있었던 것

왜 만든 것인지 뭔가 꼬였거나 아니면 두개 업체에 동시에 발주한 것?

오늘 이슈가 많아서 정리하느라 시간을 다 보냈습니다.

완성된 것과 비교하면서 자신감이 많이 떨어졌습니다. 저번과 마찬가지로 열등감을 느낀 것 같습니다.

sass를 사용한 미디어쿼리 - 반응형

sass의 장점인 변수 및 모듈 import를 통해 좀 더 쉬운 미디어쿼리작성하기

https://leonkong.cc/posts/scss-media-query.html 참조한 블로그

변수와 mixin, 그리고 미디어쿼리를 이용해서 desktop에 해당하는 틀과 모바일에 해당하는 틀을 만들어 놓는 방법에 대해 설명해 줍니다.

변수는 값을 저장하는 기능을

mixin은 css를 묶어서 모듈화(재사용)하는 기능을 가집니다.

먼저 결과물은 아래와 같습니다.

@import "./mixin";

@include desktop {
 //들어갈 scss
}
@include mobile {
 //들어갈 scss
}

variables.scss (파일명 앞에 언더바(””)가 붙으면 컴파일이 안됩니다.)

$breakpoint-mobile: 335px; //미디어쿼리에서 min-width가 되는 부분 모바일로서의 최소 크기
$breakpoint-desktop: 758px;//미디어쿼리에서 min-width가 되는 부분 데스크탑으로서의 최소 크기 

_mixin.scss mixin을 사용하여 mobile 모듈, desktop모듈을 만들었습니다.

@import "./variables";

@mixin mobile {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

장점

미디어쿼리 안에 scss 문법을 사용할 수 있다. 말고는 사실 크게 없는 듯 하다. 하지만 scss 문법을 사용할 수 있다는 것은 엄청난 장점이다.

단점

없음

live sass compiler - vscode remote ssh 이슈 및 해결

live sass compiler가 ssh 상에서 안되는 이슈가 있었습니다. 구글링을 하면서 vscode-server를 지웠다가 다시 설치, ssh 설정을 다시 설치 및 설정, extension 재설치 등의 시도를 해봤으나 Cannot reconnect Please reload window.라는 문구만 나왔습니다. ssh에서 이 extension을 사용하면 live이기 떄문에 포트를 열어서 서버를 하나 만들게 되는데 그러다보니 그 포트에 해당하는 페이지를 ssh 내에서 열 수 없었기 떄문이 아닐까? 생각합니다. 아니면 방화벽이나 보안 문제라고 생각합니다.

꼭 live 서버를 사용할 필요가 없습니다. 그리고 sass를 컴파일 하는 것이 목표 였습니다. ssh용 live sass compiler가 아니라 그냥 live sass compiler로도 컴파일하여 사용할 수 있기 때문에 이를 선택했습니다. 원인을 찾아서 해결하지는 못하였지만 다른 방법을 찾아서 해결할 수 있었습니다.

 

*소소한 팁

{
position: absolute; //일 때 중앙 정렬하는 방법
// 박스가 중앙을 기점으로 움직이지 않고 꼭짓점을 기준으로 움직이기 때문에 transform으로 다시 돌려준다.
top:50%;
left:50%;
transform:translate(-50%,-50%) 
}

SCSS

css를 편하게 사용할 수 있는 스타일 시트

css에 해당하는 변수를 만들 수도 있고 부모와 자식을 관계가 돋보이도록 작성할 수도 있습니다.

반복을 줄여줍니다. 깔끔한 코드를 작성할 수 있습니다. 직관적이고 이해하기 쉽습니다.

scss 파일을 컴파일하여 css파일을 만들게 됩니다.

VSCODE Extension Live sass compiler

php를 쓰고 있던 node를 쓰고 있던 이 익스텐션을 통해 scss파일을 css파일로 컴파일하여 html에 style시트로 붙여 넣을 수 있습니다.

Extension을 설치하고 sass폴더 및 scss파일을 만들고 그 파일로 들어가서 하단 바에서 아래와 같은 버튼을 찾은 뒤에 눌러주기만 하면 css파일을 생성합니다.

map파일과 css파일이 sass폴더 안에 생성되는 것이 싫어서 몇 가지 설정만 바꿔주었습니다.

vscode setting.json에서 다른 세팅 안에 넣는 것을 주의하며 제일 바깥 중괄호 안에 넣어줍니다.

{
	"liveSassCompile.settings.generateMap": false, // Map을 안 만드는 것
    "liveSassCompile.settings.formats": [ 
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css" // css경로 지정
        }
    ],
}

극 장점

css를 하다보면 element를 찾는 것 또는 부모 요소를 찾는 것에 시간이 다 뺏기는 경우가 있다.

scss 파일은 부모와 자식 요소를 한 곳에 몰아넣을 수 있고 직관적이다. json파일을 보는 느낌?

아직 많지 않아서 그럴 수도 있지만 변수로 만들어서 중복을 제거할 수도 있고 이게 말로만 이렇게 들을 때는 몰랐는데 직접 써보니까 왜 좋다는지 알겠다.

최근 친구의 온라인 가구 쇼핑몰을 개발하기위해 gcp에서 환경 설정을 하게 되었습니다.

홈페이지를 개발하는 과정을 유튜브로 매일 저녁 7시30~8시 사이에 시작해서 1시간에서 1시간 30분씩 방송하고 있습니다.

https://www.youtube.com/channel/UCbz860KglXxaMV2eKPDW4eg

GCP - compute engine

구글에서 제공하는 클라우드 플랫폼의 기능 중 클라우드 서버를 만들 수 있는 compute engine에 인스턴스를 만들었습니다. 가이드가 친절하게 잘 되어 있습니다.

Docker

제가 이해한 도커는 레고블록 조립을 자동으로 해주는 기계라고 느꼈습니다.

도커 파일 == 설명서

도커 이미지 == 레고 블록들

도커 컨테이너 == 완성된 레고 모양

도커 허브 == 레고 블록들을 파는 가게 물론 무료입니다만..

도커 파일을 깃헙 레포지토리에 올리게 되면 조립하고자하는 완성된 레고를 위한 설명서들이 적혀 있습니다. 이제까지 저희는 완성된 레고를 위해 손수 블록을 하나하나 만들어 쌓아야 했습니다. 도커는 이를 자동으로 편하게 만들어줍니다.

저희가 할 일은 어떤 완성된 블록을 쌓고 싶은지 및 그 설명서를 작성하는 일입니다.

제가 완성하고 싶은 레고 모양은 다음과 같습니다. 

- 프론트엔드 

  - Flutter

- 백엔드

  - nodejs - koa

  - mongodb

  - nginx

이와 같은 환경을 도커에 띄우는 것이 목표입니다.

Flutter

플러터는 웹, 안드로이드, ios 모든 기기로 배포를 할 수 있는 아주 좋은 dart 프레임워크입니다.

플러터를 debian linux에서 사용하는 것은 에뮬레이터가 없지만 vscode로 ssh를 연결하면 맥에서 돌리는 에뮬레이터를 연결할 수 있지 않을까 하는 생각입니다.

플러터를 도커라이징하는 것과 배포하는 것은 엄연히 다른 것이라는 것을 깨달았습니다. 배포는 사용자가 사용하려면 꼭 필요한 부분입니다. 하지만 도커라이징은 꼭 필요한 과정은 아닙니다. 이건 사실 제 욕심입니다. 이렇게 환경설정에 성공한다면 다음 프로젝트에도 이렇게 사용하기 위함입니다.

 

 

https://smartstore.naver.com/vinarc

*친구의 가게는 스마트 스토어를 중심으로 온라인으로 가구를 판매하고 있습니다. 친구가 원하는 것은 자기 가게만의 분위기를 만들고 싶다는 것이었습니다. 브랜딩을 잘 한 가구점은 각자의 홈페이지를 가지고 있었기 때문에 홈페이지가 필요했습니다.

지금 현재는 nginx로 도메인 호스팅을 해놓았습니다. hello-world라는 글만 띄워져 있지만 앞으로 예쁜 홈페이지가 될 것입니다.

http://www.vinarc.co.kr/ 

저의 개발일지를 읽어주셔서 감사합니다

+ Recent posts