IT 회사에서 즐겁게 지내기!

Angular의 테스트가 좀 번거롭게 느껴졌습니다.

매번 Chrome 브라우저가 뜨는 것이 귀찮았죠.

그리고 한 번만 실행하고 싶었습니다.

기본적으로는 코드 변경 시마다 반복하거든요.

그리고 가장 귀찮았던건 진행률...

깔끔하게 표출되지 않습니다.

길고 지저분하게 찍혀요.

에러가 나면 로그 보기도 어렵게말이죠.

가장 귀찮았던 것의 해결방법부터 보죠.

1. Progress 제거

사실 매우 간단하게 해결되었습니다.

ng test에 옵션이 있거든요.

바로 --no-progress 옵션

ng test --no-progress 

위 명령어를 통해 해결!

2. 한 번만 실행

이것도 옵션으로 해결될 줄 알았습니다.

그런데 잘 안되더군요.

문서의 --single-run 이란 옵션

그런데 동작하지 않습니다.

Unknown Option이란 경고만...

그래서 karma.conf.js 파일을 수정합니다.

singleRun이란 속성값을 true로 바꿉니다.

옵션 변경을 통해 해결!

3. 브라우저 실행 안함

두 가지 방법이 있었습니다.

1) Headless Chrome을 사용하는 방법

2) Phantom.js를 이용하는 방법

저는 후자가 마음에 들더라구요.

jest를 이용할 때 Phantom을 써서 그런지..

반가운 마음도 ^^

사용방법은 간단합니다.

1) dependency 설치

npm install --save-dev karma-phantomjs-launcher

위 명령어로 설치해줍니다.

2) karma.conf.js 수정

아래와 같이 변경해주면 됩니다.

아래 코드에 highlight 된 부분이 중요한 부분이에요.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), 
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,

    phantomjsLauncher: {
      exitOnResourceError: true
    }
  });
};

require('karma-phantomjs-launcher')

browsers: ['PhantomJS']

바로 요 두 부분의 코드입니다.

아래는 깔끔해진 콘솔에서의 테스트 모습이에요.

테스트 실행 화면

브라우저 테스트가 번거로우셨거나

테스트 콘솔이 길어서 불편하셨던 분은

저처럼 바꿔보시는 걸 추천드립니다.

CI 구성하시는 분들은 필수!

*CI(Continuous Integration)

Pipe는 매우 간단하지만 효과적인 기능입니다.

Data를 사용자에게 더 잘 보여주는 것이에요.

사실 프로젝트에서 슬쩍 사용하고 있었습니다.

어떤 것이냐구요?

바로 금액을 표시하던 부분!

Angular Pipes 활용 예시

위에 보면 원표시(￦)가 있죠?

단위를 텍스트로 일일이 표시하기 귀찮습니다.

날짜는 어떻구요.

11월 12일, 2018년 이럼 좋지만.

보통 Date 형식의 Data는 어떻죠?

Mon Sep 12 2018 00:00:00 GMT+0900

못생겼습니다.

이것을 보기 좋게 바꾸는 것도 일이죠.

이럴 때 Angular의 Pipe를 이용합니다.

먼저 사용방법은 아래와 같습니다.

<div class="budget-balance">
  <div class="balance-total">
    <span class="balance-title">Balance</span>
    <span class="balance-amount">
      {{balance | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
  <div class="budget-total">
    <span class="budget-title">Today's Budget</span>
    <span class="budget-amount">
      {{budget | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
</div>

String Interpolation에 pipe를 추가합니다.

{{ 데이터 | Pipe }}

String Interpolation은 초반에 다루었죠?

Angular 데이터 바인딩 I (String Interpolation)

중요한 부분은 Pipe 입니다.

저는 Currency Pipe를 이용했습니다.

파이프이름:설정:설정... 과 같은 구조입니다.

Pipe마다 설정이 다르니 문서를 참조해야합니다.

기본제공되는 파이프는 아래와 같습니다.

DatePipe

예: {{ birthday | date:"MM/dd/yy" }}

UpperCasePipe

예: {{ value | uppercase }} 

LowerCasePipe

예: {{ value | lowercase }} 

CurrencyPipe

예: {{ money | currency:'KRW':'symbol'}} 

PercentPipe

예: {{ 0.259 | percent }}

물론 스스로 pipe를 만들 수도 있습니다.

자주 쓰는건 만들어둬도 좋겠죠?

전 아직 기본만 쓰면 충분하더라구요. ^^

정보출처:

https://angular.io/guide/pipes

Angular의 화면 이동에 대한 부분입니다.

지난 글에서 RouterModule을 다뤄봤는데요.

(Angular Router)

브라우저에 주소를 입력하여 이동했었죠?

오늘은 NGXS의 플러그 인을 사용하겠습니다.

사이트의 이동경로는 중요한 상태중 하나입니다.

그것을 스토어에서 관리하면 장점이 있지요.

사용자가 접속한 주소를 컴포넌트가 알 수 있구요.

어느 경로를 통해 왔는지도 파악 가능합니다.

물론 사이트 내의 이동경로 뿐이지만요.

그럼 코드를 통해 살펴보겠습니다.

1. Import NgxsRouterPluginModule

플러그인을 사용하기 위해 모듈을 Import 합니다.

NgxsRouterPluginModule 입니다.

그리고 @NgModule 의 Imports에 추가합니다.

RouterModule 설정은 그대로 둡니다.

...
import { NgxsRouterPluginModule } from '@ngxs/router-plugin'

const appRoutes : Routes = [
  { path: '', component: BudgetComponent },
  { path: 'config', component: SettingComponent }
]

@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot(appRoutes),
    NgxsRouterPluginModule.forRoot()
  ],
  ...
})
export class AppModule { }

2. Component에 Navigate 메소드 추가

이제 경로 이동을 추가할 컴포넌트로 갑니다.

저는 Header에 경로 이동 코드를 넣겠습니다.

Store와 Navigate 모듈을 Import 하구요.

Store에 Navigate 객체를 dispatch 합니다.

마치 action 동작을 수행하는 것처럼요.

(Angular State Management (NGXS) Code)

...
import { Store } from '@ngxs/store';
import { Navigate } from '@ngxs/router-plugin';

@Component({
  ...
})
export class HeaderComponent implements OnInit {
  constructor(private store: Store) { }
  moveTo(path){
    this.store.dispatch(new Navigate([path]))
  }
}

참! 생성자에 Store 의존성을 주입하구요.

Service를 사용할 때와 동일합니다.

(Angular Service 만들기)

Angular의 강점인 의존성 주입이죠?

3. Template에 method 바인딩

로고 아이콘, 타이틀을 클릭하면 루트로

설정 아이콘을 클릭하면 설정으로 보냅니다.

아래와 같이 click에 바인딩을 해주었습니다.

<mat-toolbar color="primary">
  <mat-icon (click)="moveTo('/')">account_balance</mat-icon>
  <span class="application-title" 
      (click)="moveTo('/')">Daily Account Log</span>
  <span class="fill-remaining-space"></span>
  <mat-icon 
      (click)="moveTo('/config')">settings</mat-icon>
</mat-toolbar>

그러면 로고를 클릭할 때 moveTo가 호출되구요.

path에 따라 화면을 이동합니다.

route 이동 동작화면(ngxs)

동작화면을 보면 깜빡임도 없죠?

<router-outlet> 부분만 다시 rendering 됩니다.

필요한 부분(Component)만 바꿔치기 되는 거죠.

소스주소: https://github.com/jsrho1023/account-book

정보출처: 

https://angular.io/guide/router

https://ngxs.gitbook.io/ngxs/plugins/router

이번은 새로운 페이지의 추가, 이동 입니다.

웹사이트는 여러 페이지로 이루어져 있습니다.

사용자는 페이지를 이동해가며 사이트를 이용합니다.

Angular에서의 페이지 이동은 Router를 통합니다.

역시 코드와 함께 살펴보겠습니다.

1. Component 생성

새로운 페이지를 구성할 컴포넌트를 생성합니다.

angular-cli 를 이용하여 생성하겠습니다.

(Angular 새로 Component 만들기)

ng g c setting

실행하면 setting 컴포넌트가 생성됩니다.

2. Import Routes, RouterModule

angular 모듈을 import 합니다.

app.module.ts 파일을 수정합니다.

import { Routes, RouterModule } from '@angular/router';

간단하죠?

3. Routes, RouterModule 설정

이제 컴포넌트와 주소를 연결해줄 Routes를 만듭니다.

자바스크립트 객체의 배열로 생성하면 됩니다.

{ path: 주소이름, component: 컴포넌트 }

주소이름은 맨 앞의 / 를 생략한 상태로 씁니다.

/는 빈 문자열 /config는 'config' 라고 입력합니다.

그리고 NgModule의 imports에 RouterModule을 추가합니다.

생성한 Routes를 인자로 forRoot 메서드를 호출합니다.

import { Routes, RouterModule } from '@angular/router';
...
const appRoutes : Routes = [
  { path: '', component: BudgetComponent },
  { path: 'config', component: SettingComponent }
]

@NgModule({
  ...
  imports:[
    ...
    RouterModule.forRoot(appRoutes),
    ...
  ],
  ...
})
export class AppModule { }

위와 같이 설정하면 아래와 같이 맵핑됩니다.

{서버주소} 는 BudgetComponent

{서버주소}/config 는 SettingComponent

4. Template 변경

이제 주소에 따라 다른 컴포넌트가 보여져야합니다.

따라서 화면에도 변경이 필요하겠죠?

<router-outlet> 이라는 태그를 사용합니다.

이곳에 컴포넌트를 render 하라는 directive 에요.

<div class="mat-app-background">
    <div class="mat-elevation-z4">
        <app-header></app-header>
    </div>
    <router-outlet></router-outlet>
</div>

위와 같이 하면 완성입니다.

주소에 따라 다른 컴포넌트가 보여집니다.

router 동작 화면

사실 위처럼 주소를 외워서 이동하지는 않죠?

다음에는 화면 버튼을 통한 이동을 해볼게요.

로딩하는 하얀 화면 동작도 없어질 겁니다.

소스주소: https://github.com/jsrho1023/account-book

개인 프로젝트용으로 AWS 무료 사용 중입니다.

간혹 잘못 사용하여 과금되기도 했었죠.

(http://dschci.tistory.com/100)

사실 AWS 사용 전 가입 때 문제가 있었습니다.

같은 문제를 겪는 분이 있으실까 공유합니다.

AWS 가입은 간단한 편이니 과정은 생략!

주의할 점은 주소는 영어로 입력해야하는 것 입니다.

그럼 문제를 겪은 포인트부터 가겠습니다.

바로 전화 번호 확인입니다.

전화번호 인증 화면

'지금 전화하기' 버튼을 클릭했습니다.

하지만 전화 거는 중이라면서 전화가 오지 않아요.

당황 스럽습니다.

여러번 시도해도 마찬가지 였습니다.

게다가 최대 시도 횟수를 초과하고 맙니다

AWS에 로그인은 됩니다.

다만 모든 기능을 이용할 수 없을 뿐.

지원센터에 문의를 남깁니다.

지원 신청

언어는... 아쉽게도 일본어, 영어밖에는 안됩니다.

아래와 같이 contact을 합니다.

(그래도 비교적 영어가 익숙하잖아요?)

제목은 간단하게.

내용(description)은 저의 상황 설명이죠.

Support Dashboard에서 Live Chat 옵션을 발견합니다.

클릭하면 아래와 같이 바로 대화를 진행하게 됩니다.

AWS Live Chat

채팅하던 직원이 직접 전화를 해줍니다.

30초 가량 확인 전화에요.

영어로 이야기하지만 내용은 간단합니다.

요지는 "채팅하던 그 분 맞나요?"

당연히 Yes. 바로 검증 절차를 완료해줍니다.

간단하게 5분 안에 절차가 완료됩니다.

꽤나 만족스러운 경험이었어요.

친절합니다.

AWS는 무료로(?) 지금까지 잘 사용하고 있습니다.

(http://dschci.tistory.com/100)

같은 어려움을 겪는 분들께 도움이 되면 좋겠네요.

무료 사양은 아래와 같습니다.

CPU: Intel Zeon 2.5GHz 

MEMORY: 1GB

STORAGE: 30GB

넉넉하진 않지만 테스트용으로는 충분합니다.

울산을 방문한 김에 울산에서 방탈출을 했다.

울산에서의 3번째 방탈출~

비밀의 무덤을 클리어했으므로 기고만장하여.

더 어려운 난이도에 도전.

트랩코리아에서 가장 어렵다는 테마!

트랩코리아의 아마겟돈

업체난이도: ★★★★★

체감난이도: ★★★★★ (5/5)

스토리: ★★ (2/5)

추천도: ★★★☆ (3.5/5)

Player 참고: 방탈출 경력 22회 부부

Comment: (성공?/3 hint)

 Jason: "탈출 성공인가 아닌가... ㅜ"

 Julie: "다른 우주선 테마도 또 해보고 싶다..."

Intro:

지구는 지금 엄청난 속도로 지구를 향해 돌진하는 

거대 소행성으로 인해 위험에 처해있습니다.

다행히 며칠 전 과학자들이 

충돌 예상 궤도를 계산했고 대책을 만들어 냈습니다.

로켓을 소행성으로 발사하여 

소행성과 충돌하게 한 후 궤도를 바꾸어 

지구로부터 멀어지게 하는 것이 그들의 계획입니다.

하지만 불행하게도 지구의 로켓발사대는 

대부분 운석들로 인해 파괴된 상태 입니다.

버려진 지하 군사 벙커에 설치된 복원장치를 

발견할 수 있는 것은 오직 당신의 팀밖에 없습니다.

당신 팀의 임무는 벙커를 발견하고 

시스템이 어떻게 동작하는지 알아내어 

늦기 전에 로켓을 발사하는 것입니다.

남은 시간은 60분! 

인류의 운명은 당신 손에 달려있습니다.

공간은 넓은 편이다.

무서운 요소는.. 조금(?) 있다.

Julie가 몇 가지 소품과 소리에 놀랐...  

활동성은 높지 않아서 복장은 편한대로~

장치 자물쇠는 5:5 정도였다.

다른 방탈출보다 도구를 좀 많이 사용했다.

대부분의 문제는 명확한 편이었다.

1~2문제 정도 서로 잘 연결이 안되는 느낌?

문제를 위한 문제가 좀 포함되어있다.

열쇠가 대체 왜 그렇게 거기에...

차별화 요소가 될 것 같기도 한데...

눈에 보이는 열쇠를 쓰지 못하다니 ㅠ

시간을 가장 많이 사용한 듯 하다.

호불호가 클 듯한 녀석이다.

알면 쉬우나 모르면 1시간 내내해도... ㅠ

어려운 난이도 답게 문제가 좀 많은 편.

5분에 1문제 정도 풀어줘야 겨우 탈출한다.

60분 다지나서 딱 마무리...

트랩코리아의 별4개 테마인 비밀의 무덤 

탈출했었다며 조금 오만했나보다.

그런데 사실 힌트가 좀 늦는 편이었다.

무전기로 힌트를 얻는다.

하지만 대답없는 외침이 여러번.. ㅠ

직원(아마 사장님?)분이 1분 뿐이라 그런듯.

방정리, 손님응대, 힌트 동시에 하기에는...

서비스는 좀 아쉬운 편.

친절하시긴 하다.

시간 꽉차게, 알차게 풀었는데도 

뭔가 몰입이 좀 덜되는 느낌이 들었다.

요즘 감성테마 자주해서 그런가?

아무튼 아래 인증샷과 함께 마무리.

탈출 인증샷

아.. 그리고 트랩코리아가 한국에서 철수하는 듯 하다.

홈페이지도 정리되었고...

각 지점도 언제 없어질지 모르니

관심 있으면 서두르는게 좋겠다.

이미지출처:

구글 이미지 검색 "트랩코리아 아마겟돈"

이번에는 Angular Forms 모듈을 좀 더 활용해보도록 하죠.

유효성 검증에 대해 다뤄볼까 합니다.

보통은 keyup이나 focusout event를 받아서 처리합니다.

Angular에서는 Validator라는 것을 사용합니다.

0. Component에 Import Validators

Validators 모듈을 가져옵니다.

import { FormControl, Validators } from '@angular/forms';
...

@Component({
  ...
})
export class BudgetComponent implements OnInit{ ... }

1. Form Control에 Validators 추가

Form Control을 생성할 때 Validators를 추가합니다.

import { FormsControl, FormGroup, Validators } from '@angular/forms';
...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl('', [
            Validators.required,
            Validators.pattern(/^\d+$/)
        ]),
        desc: new FormControl('')
    });
    ...
}

FormControl 생성자에 2번째 변수로 넣어줬죠.

값을 입력했는지 여부를 required로 검증하구요.

Regular Expression 패턴 검증도 합니다.

amount에 숫자만 들어가는지 검증합니다.

2. Template에 Feedback 추가

유효성에 따라 적절한 Feedback을 줍니다.

<form class="consumption-form" (ngSubmit)="onAdd()" 
[formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount"
           placeholder="Amount" 
           type="text">
      <mat-error 
          *ngIf="consumptionForm.controls.amount.hasError('pattern') 
          && !consumptionForm.controls.amount.hasError('required')">
        <strong>Numbers</strong> only
      </mat-error>
      <mat-error
          *ngIf="consumptionForm.controls.amount.hasError('required')">
        Amount is <strong>required</strong>
      </mat-error>
  </mat-form-field>
  ...
  <button [disabled]="!consumptionForm.valid" 
          mat-stroked-button 
          color="accent" type="submit">Add</button>
</form>

mat-error가 아닌 span이어도 괜찮습니다.

material design 적용을 위한 태그입니다.

중요한 부분은 *ngIf directive 입니다.

(http://dschci.tistory.com/89)

FormControl에 오류가 있을 때만 표시되죠.

그리고 FormGroup도 영향을 받습니다.

FormGroup내 FormControl에 오류가 있다면

FormGroup도 유효하지 않은 상태가 되죠.

그에 따라 버튼을 disable 시켰습니다.

Angular에는 다양한 Validators가 준비되어있습니다.

자주쓰는 email 이나 최소, 최대길이 등이죠.

Validator를 직접 만들수도 있습니다.

boolean을 리턴하는 ValidatorFn을 만들면 되죠.

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: (ValidatorFn | null | undefined)[] | null): ValidatorFn | null
  static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null
}

Validation이 적용된 화면은 아래와 같습니다.

동작 화면

작업 중인 소스는 아래에서 확인가능합니다.

소스주소: https://github.com/jsrho1023/account-book

정보출처:

https://angular.io/api/forms/Validators

프론트엔드 개발에서 Form은 필수적으로 사용됩니다.

로그인을 한다든지, 질문이나 댓글을 남기는 등 말이지요.

Angular 역시 Form을 쉽게 개발하도록 돕습니다.

데이터 바인딩, 유효성 검증, 에러 처리 관점에서요.

그럼 코드와 함께 보도록 하겠습니다.

0. Import ReactiveForms Module 

익숙한 과정이죠?

Angular의 모듈을 가져옵니다.

이번에는 Form에 관련된 모듈입니다.

app.module.ts 파일을 편집합니다.

import { FormsModule } from '@angular/forms';
...

@NgModule({
  ...
  imports: [
    ReactiveFormsModule,
    ...
  ],
  ...
})
export class AppModule { }

1. Component ts 파일에 form control 추가

이제 컴포넌트 파일에 FormControl을 만들어줍니다.

html(템플릿)에 바인딩하기 위함입니다.

import { FormControl, FormGroup } from '@angular/forms';
...

@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl(''),
        desc: new FormControl('')
    });
    ...
}

보통 form은 여러개가 묶여있죠?

그룹핑 하기 위한 FormGroup도 사용하였습니다.

2. Template html에 form 태그 추가

말씀드렸듯이 html에 form을 추가하고 바인딩합니다.

fromGroup 속성에 컴포넌트의 FormGroup을 바인딩합니다.

익숙한 Property Binding이죠?

(http://dschci.tistory.com/81)

그리고 각각의 input에 FormControl을 할당해줍니다.

formControlName이라는 속성에 이름을 넣습니다.

저는 각각 amount, desc라고 명명했죠.

...
<form class="consumption-form" 
            (ngSubmit)="onSubmit()" 
            [formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount" 
           placeholder="Amount"
           type="text" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput
           formControlName="desc" 
           placeholder="Description" 
           type="text">
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit">Add</button>
</form>
...

material을 위한 태그와 속성은 없어도 동작합니다.

(mat-form-field, matInput)

그럼 이제 마지막으로 submit 동작을 정의해줍니다.

3. Component에 submit 로직 추가

위 html에 보면 submit 타입의 버튼이 있습니다.

그 버튼이 눌렸을 때의 동작입니다.

form의 ngSubmit에 바인딩이 있죠.

ngForm의 ngSubmit Event Binding입니다.

(http://dschci.tistory.com/83)

컴포넌트의 onSubmit 메서드와 연결되어있죠.

아래 코드입니다.

control에 입력된 값에 접근하는 방법입니다.

FormGroup이 컴포넌트에 정의되어있죠?

쉽게 아래와 같이 접근 가능합니다.

...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    onSubmit() {
        let amount: number = Number(this.consumptionForm.controls.amount.value)
        let desc: string = this.consumptionForm.controls.desc.value
        ...
    }
}

위는 간단한 바인딩을 통한 Form 사용이었습니다.

동작화면은 FormsModule 기능이 좀 더 사용되었습니다.

Angular Forms 동작 화면

다음에는 데이터 검증 및 에러 피드백에 대해서 써볼게요.

소스주소: https://github.com/jsrho1023/account-book

월야애담에서 좋은 인상을 받았던 키이스케이프.

(월야애담 http://dschci.tistory.com/98)

키이스케이프의 감성테마 살랑살랑연구소.

포스터부터 느낌이 좋아 도전하기로 했다.

일주일 후까지의 예약만 받기에 예약도 쉽지 않다.

그래서 그런지 더 기대를 가지고 갔는데...

키이스케이프의 살랑살랑연구소

업체난이도: ★★★☆

체감난이도: ★★★ (3/5)

스토리: ★★★★ (4/5)

추천도: ★★★★★ (5/5)

Player 참고: 방탈출 경력 21회 부부

Comment: (성공/2 hint)

 Jason: "힐링힐링~~~"

 Julie: "부디 좋은 테마 많이 만들어주세요<3"

Intro:

사랑만 하기에도 부족한 세상. 

지금, 당신은 사랑을 하고 있나요? 

세상에는 정말 많은 종류의 사랑이 있죠. 

연인과의 사랑, 부모와 자식간의 사랑,

형제자매의 사랑, 친구들과의 사랑.. 

살랑살랑연구소는 

이런 모든 사랑을 세상에 널리 퍼트려서 

서로가 사랑하는 세상을 만들고자 설립되었습니다. 

살랑살랑 불어오는 봄바람처럼 

살랑살랑 연구소와 함께라면 

여러분도 사랑을 찾으실 수 있을거에요. 

사랑에 관한 모든것을 도와드립니다. 

그럼 오늘도 출근해볼까요?

큰 기대를 가볍게 만족시켰던 테마!

방에 입장해서 불을켜자마자 인테리어에 놀랐다.

아기자기하고 예쁜 사무실 느낌~

소품마저 예쁘다!

포스터의 감성을 담은 공간이었다.

사무실이다보니 환한 공간이며,

무서운 요소는 전혀 없다.

장치 동작하는 '삑딱쿵'이 있긴 하다.

이런 소리에 놀란다면... 몇 개 있다.

관찰력 부족으로 힌트를 2개나 사용했다.

늘 문제는 관찰력...

분명 봤는데 발견하지 못한...

그래도 힌트는 명확한 편이다.

자물쇠 장치 비율이 7:3 정도인데,

지겨운 느낌이 전혀 없다.

문제를 풀다보면 주인공 스토리에 몰입이 된다.

너무 빨리 탈출하는거 아냐?

이런 설레발이 있었지만, 그렇지 않았다. -_-;

끝날 때까지 끝난 게 아니다.

문제는 즐길만큼 충분히 준비되어 있다. ^-^;

스토리가 어느 정도 예측되긴 한다.

하지만 스토리를 풀어내는 연출이 정말 좋다.

따뜻한 느낌의 방탈출이었다.

탈출 인증샷

스토리가 빈약한 테마를 하나 쓰고 보니,

스토리가 인상적이었던 방탈출 테마를 소개하고 싶어졌다.

덤앤더머의 러브클리닉(http://dschci.tistory.com/101)의

직후에 연방한 이일호씨.

비트포비아의 이일호씨

업체난이도: ★★ (2/5)

체감난이도: ★★★ (3/5)

스토리: ★★★★ (4/5)

추천도: ★★★★ (4/5)

Player 참고: 방탈출 경력 16회 부부

Comment: (성공/3 hint)

 Jason: "기억에 남는 스토리 라인"

 Julie: "연방으로 인한 관찰력 급감..."

Intro:

당신은 생명공학기업인 HM Corp.에 다니고 있는 평범한 회사원 이일호씨

평소처럼 출근해서 업무를 보던 중 갑자기 정신을 잃고 쓰러졌다. 

정신을 차려보니 손에 수갑이 채워진 채 사무실에 갇혀있다.

그리고 눈에 띈 낯선 서류봉투

'Project T? 우리 팀에서 이런 프로젝트가 진행됐었나?'

뭔가 수상하다 1시간 안에 진상을 밝혀내 사무실에서 나가야 한다!

이일호씨는 문제 수가 많다는 느낌을 받았다.

1분을 남기고 탈출할 수 있었는데 쉼 없이 문제를 만난 느낌이다.

장치보다는 자물쇠가 많았다.

하지만 그럼에도 불구하고 즐길 수 있었다.

그 이유는 문제를 풀면서 스토리를 알아가는 구성력 덕분이다.

점점 이일호씨의 사연이 궁금해진다.

문제를 풀수록 나 자신이 이일호씨가 된 것 같은 몰입감.

2명이서 즐기기에 충분히 넓은 편이었다.

활동성은 높지 않은 편이다.

관찰력이 필요하다.

어떤 단서를 어디에 적용할지 여기저기 찾아볼 필요가 있다.

공포 요소는 전혀 없다.

숨겨진 공간에 대한 창조공포는.. 막을 수 없다.

힌트를 3번 사용했는데...

연방으로 인한 피로감인지 눈 앞의 단서를 놓쳤다.

2번의 힌트는 관찰력 부족...

단서를 한 번 더 응용해야 했는데 그러지 못했다.

1분여 남긴 극적인 탈출.

충분히 즐기고 온 재미난 테마였다.

탈출 인증샷