윈도우, 맥 스타일 시스템 오류 창 티스토리 디자인 서식

오류 정보창 디자인

여러 가지 오류에 대한 해결 방법에 대한글을 작성할 때 스크린샷을 통해 정보를 제공하는 것도 좋지만, 좀 더 원활한 이해를 돕기 위해 텍스트로 전달할 수 있도록 서식을 만들어 봤습니다.

디자인 정보

1. 사이즈는 480px 사이즈로 만들었습니다.
2. 반응형으로 동작합니다.
3. 이모지를 사용하여 수정하기 쉽습니다.
4. 드롭쉐도우(그림자 효과)를 적용했습니다.
5. 상단여백 10px, 하단여백 20px를 적용하였습니다.

위 사항은 모든 디자인 제작에 공통으로 적용한 것입니다. 서식을 사용하여 글을 작성하셔도 가독성이 떨어지지 않도록 하였습니다. 밝은 스킨에 사용하셔도 구분이 잘될 수 있도록 하였습니다.

디자인 종류

첫 번째 디자인입니다.

⚠️ Photoshop.exe - System Error		x
🚫	컴퓨터에 MSVCR10.dll이(가) 없어 프로그램을 시작할 수 없습니다. 프로그램을 다시 설치하여 이 문제를 해결하십시오.
확인

첫 번째 디자인 Html 코드입니다.

<table style="border-collapse: collapse; width: 100%; max-width: 600px; font-size: 15px;" border="1" data-ke-align="alignLeft" data-ke-style="style17">
<tbody>
<tr bgcolor="#034A96">
<td style="width: 95%; border-right: hidden; color: #f2f2f2;" colspan="2">⚠️ Photoshop.exe - System Error</td>
<td style="width: 5%; color: #f2f2f2;">x</td>
</tr>
<tr bgcolor="#f2f2f2">
<td style="width: 10%; border-right: hidden; font-size: 50px;">🚫</td>
<td style="width: 89.8594%;" colspan="2">컴퓨터에 MSVCR10.dll이(가) 없어 프로그램을 시작할 수 없습니다.<br />프로그램을 다시 설치하여 이 문제를 해결하십시오.</td>
</tr>
<tr bgcolor="#DDD">
<td style="width: 100%; border-top: hidden; padding: 12px;" colspan="3">
<div style="width: 100px; height: 25px; border: 2px solid black; text-align: center; float: right;">확인</div>
</td>
</tr>
</tbody>
</table>

두 번째 디자인입니다. 가장 많이 보이는 오류정보창을 만들어 보았습니다.

Unrecoverable Error		x
🚫	Steam must be running to play this game. Make sure you are logged into Steam, then try again.
OK

두 번째 디자인 Html 코드입니다.

<table style="border-collapse: collapse; width: 100%; max-width: 600px; font-size: 15px;" border="1" data-ke-align="alignLeft" data-ke-style="style17">
<tbody>
<tr bgcolor="#fff">
<td style="width: 95%; border-right: hidden; color: #000;" colspan="2">Unrecoverable Error</td>
<td style="width: 5%; color: #000;">x</td>
</tr>
<tr bgcolor="#fff">
<td style="width: 10%; border-right: hidden; border-top: hidden; font-size: 50px;">🚫</td>
<td style="width: 89.8594%; border-top: hidden;" colspan="2">Steam must be running to play this game. Make sure you are logged into Steam, then try again.</td>
</tr>
<tr bgcolor="#e0e0e0">
<td style="width: 100%; border-top: hidden; padding: 12px;" colspan="3">
<div style="width: 100px; height: 25px; border: 2px solid black; text-align: center; float: right;">OK</div>
</td>
</tr>
</tbody>
</table>

세 번째 서식 디자인입니다. 이번에는 Mac 스타일로 만들어 보았습니다.

●	●	●	Device Removal
🛑			he device you removed was not properly put away.Data might have been lost or damaged. Before you unplugyour device, you must first select its icon in the Finder andchoose Eject from the File menu.
OK

세 번째 디자인 html 코드입니다.

<table style="border-collapse: collapse; width: 100%; max-width: 600px; font-size: 14px;" data-ke-align="alignLeft">
<tbody>
<tr bgcolor="#303031">
<td style="width: 1%; padding: 10px; border-right: hidden; color: #fe6057; text-align: right;">●</td>
<td style="width: 1%; padding: 3px; border-right: hidden; color: #fcbe2f;">●</td>
<td style="width: 1%; padding: 3px; border-right: hidden; color: #28ca40;">●</td>
<td style="width: 97%; color: #f2f2f2; padding-left: 175px;">Device Removal</td>
</tr>
<tr bgcolor="#E8E8E8">
<td style="width: 3%; padding: 10px; text-align: right; font-size: 50px; border-top: hidden; border-right: hidden;" colspan="3">🛑</td>
<td style="width: 97%; padding: 10px; border-top: hidden;">he device you removed was not properly put away.Data might have been lost or damaged. Before you unplugyour device, you must first select its icon in the Finder andchoose Eject from the File menu.</td>
</tr>
<tr bgcolor="#E8E8E8">
<td style="width: 100%; padding: 10px; border-top: hidden;" colspan="4">
<div style="width: 100px; height: 25; float: right; border-radius: 50px; background-color: #034A96; color: #f2f2f2; text-align: center;">OK</div>
</td>
</tr>
</tbody>
</table>

네 번째 디자인입니다.

●	●	●	Device Removal
🛑			다음과 같은 문제가 발견되었습니다. 설치 프로그램에서 초기화를 실패했습니다. 파일이 누락되었습니다. 문제를 확인하려면 Adobe 지원 관리자를 다운로드하십시오.
종료

네 번째 디자인 html 코드입니다.

<table style="border-collapse: collapse; width: 100%; max-width: 600px; font-size: 14px;" data-ke-align="alignLeft">
<tbody>
<tr bgcolor="#d7d6d7">
<td style="width: 1%; padding: 10px; border-right: hidden; color: #fe6057; text-align: right;">●</td>
<td style="width: 1%; padding: 3px; border-right: hidden; color: #fcbe2f;">●</td>
<td style="width: 1%; padding: 3px; border-right: hidden; color: #28ca40;">●</td>
<td style="width: 97%; color: #000; padding-left: 175px;">Device Removal</td>
</tr>
<tr bgcolor="#303031">
<td style="width: 3%; padding: 10px; text-align: right; font-size: 50px; border-top: hidden; border-right: hidden;" colspan="3">🛑</td>
<td style="width: 97%; padding: 10px; border-top: hidden; color: #f2f2f2;">다음과 같은 문제가 발견되었습니다. 설치 프로그램에서 초기화를 실패했습니다. 파일이 누락되었습니다. 문제를 확인하려면 Adobe 지원 관리자를 다운로드하십시오.</td>
</tr>
<tr bgcolor="#303031">
<td style="width: 100%; padding: 10px; border-top: hidden;" colspan="4">
<div style="width: 100px; height: 25; float: right; border-radius: 50px; background-color: #d7d6d7; color: #000; text-align: center;">종료</div>
</td>
</tr>
</tbody>
</table>

서식 활용 예제

http://game.nexon.com/94227		x
🚫	http://game.nexon.com/94227. 파일 시스템 오류(-2147219196)
OK

위와 같은 오류가 발생하게 되었을 때 간단하게 해결이 가능합니다.

💻 관리자: Windows PowerShell				-	ㅁ	x
Microsoft Windows (c) Microsoft Corporation. All rights reserved. C:\Windows\system32>sfc /scannow 입력 후 엔터

위와 같이 입력하시면 시스템 검사가 시작되면서 해당 오류가 해결됩니다. 이런 식으로 간단하게 방문자가 이해하기 쉽도록 글작성이 가능합니다. 그럼 퍼가실 때 그냥 가져만 가지 마시고 출처는 남겨주시기 바라겠습니다.