HIYO

크몽에 등록된 작업물 중 짧은대본 작업물 느낌을 원하셨던 의뢰자님이다.

게임 아카데미라는 특성을 담아 스포티하지만 깔끔한 느낌으로 제작해 드렸다.

모션 구동, 반응형 디자인에 주로 신경 썼던 외주이다.

디자인 틀은 짜오셔서 나머지 건에 대해 신경을 써달라고 말씀 하셨다.

해당 건도 급건이라 시간이 많이 부족해 원하시는 모션은 모두 구현해 드렸으나 약간의 딜레이가 생기는 점이 아쉬웠다.

그래도 만족해 주시고 리뷰까지 남겨 주셔서 감사했다!

해당 외주는 급건으로 후불 결제를 원하셨다.

거래 규정상 워터마크 처리된 제작물을 발송 드리는 것으로 제작 진행했다!

가이드라인이 잡혀있던 건이라 대략적인 디자인만 잡아 드렸다.

2023.12.26 화요일에 웹디자인 판매 서비스 승인을 받았다!

두 번 심사 비승인 이슈가 있었지만 포트폴리오 수정 후 승인. 승인 절차가 꽤나 까다로웠다.

개인적으로 가장 어려웠던 점은 가격 책정 단계... 값어치 매기는게 애매하고 어려웠다.

광고를 결제할까 고민하던 중 24.01.10 첫 주문이 들어왔다.

클라이언트님과 상담 후 크몽안전결제를 통해 결제 후 작업에 돌입했다.

총 2페이지 의뢰를 하셨지만 첫 주문인 만큼 정성을 들이고 싶어서 서브 페이지는 두 가지 시안을 만들어 드렸다 :)

수정 전 첫 시안을 보내드리고 수정 단계로 들어섰다.

원래 크몽에 올려둔 수정 가능 횟수는 2번이었으나 상담 과정에서 부족함이 있어 1번 더 수정해 드렸다.

총 3번의 수정을 통해 최종 작업물 완성 완료!

클라이언트님께서 서브페이지는 해당 시안을 선택하셨다.

최종 수정본 확인 후 작업물은 피그마 파일로 전송해 드렸다.

느낀점)

첫 의뢰였던 만큼 상담 과정이나 가격 책정 등 여러 부분에서 부족한 점이 많았다고 생각한다.

여러가지가 있지만 가장 큰 점은 포트폴리오에 대한 욕심 -> 가격 책정 미흡 + 크몽 수수료

해당 의뢰건은 50,000원짜리 의뢰였다. 홈페이지 메인+서브페이지1개 총 두 페이지를 제작하는데 드는 시간도 꽤나 들었던 뿐더러 상담, 제작, 수정에 대한 시간과 수수료 등을 모두 계산하니 최저임금에도 미치지 못하는 페이가 되었다...!!

물론 후회는 없다.

해당 의뢰건을 통해 배운 점이 더 많았기 때문이다 😎

다음 주문이 들어온다면 사전 공지할 점에 대해 멘트를 짜두었고 상황별 대처법, 크몽 정책에 대해 더 공부하였다.

올해 목표였던 부업 수익화가 이렇게 빨리 이루어질 줄은 몰랐다...

새로운 목표는 스타트업/기업의 의뢰를 받아보는 것이다.

프리랜서의 첫 걸음 뿌듯하다 😙

네비게이션, 플로우차트는 '오리진'을 참고하여 만들었다.

기본 위젯 추가

1. 글자 위젯

2. 아이콘 위젯

3. 이미지 위젯

4. 박스 위젯

1. 글자 위젯

home: Text('HELLO TISTORY!')

Text('글 내용') 

원하는 글 내용을 Text(' 여기 ')에 적으면 된다.

올바른 코드인지 확인을 위해 상단 보이는 Chrome(web) -> RUN 버튼을 눌러 실행되는 페이지를 본다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Text('HELLO TISTORY!')
    );
  }
}

2. 아이콘 위젯

아이콘 삽입을 위해서는 해당 형태의 코드를 사용하면 된다.

home: Icon(Icons.music_note)

아이콘의 이름을 확인하기 위해서는

해당 링크에 접속해 마우스오버를 하면 된다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Icon(Icons.music_note)
    );
  }
}

3. 이미지 위젯

이미지 위젯 사용 전 이미지용 디렉토리 생성이 필요하다.

해당 루트를 따라 생성해준다.

contact -> New -> Directory로 새로운 파일을 생성해 준다.

파일의 이름을 assets로 설정한다.

다음,  상단 사진에 보이는 pubspec.yaml 파일의 flutter: 부분을 하단 코드처럼 수정해 준다.

flutter:
  assets:
    - assets/

assets 파일의 이미지를 사용하기 위한 세팅이 끝났다.

assets 파일에 원하는 사진을 드래그해 넣어준다.

main.dart로 돌아와

home: Image.asset('sim.jpg')

해당 코드를 사용하면 이미지가 정상 출력 된다.

Image.asset(' ')의 괄호 속에는 이미지의 이름.확장자 타입을 적어주면 된다 :)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Image.asset('sim.jpg')
    );
  }
}

! fm으로는 Image.asset('assets./sim.jpg') 이지만 상단 코드처럼 작성해도 정상 출력이 가능하다.

4. 박스 위젯

박스 삽입을 위한 코드는 해당 형태를 사용하면 된다.

home: Container()

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Container()
    );
  }
}

아무것도 안 보이는 이유는 스타일 지정이 되지 않은 투명 박스이기 때문!

따라서 Container() 괄호 안에 스타일 지정을 해주면 된다.

width: , height를 이용해 박스 크기를 지정해 주고 color:Colors. 를 통해 색을 지정해 준다.

컬러는 상단 사진처럼 쭉 뜨니 원하는 색을 사용하기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Container(width:50, height:50, color: Colors.indigo)
    );
  }
}

와이라노? 

정상입니다.

좌표 설정을 안 해주었기 때문이다.

어디서부터 박스를 그릴지 지정을 안 함

Center( child: 이하 생략)

을 사용해 좌표를 설정하고 자식 관계를 만들어 준다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Center(
        child: Container(width:50, height:50, color: Colors.indigo))
    );
  }
}

성공!

다음엔 네가지 위젯을 모두 사용한 페이지를 만들어 보겠다.